[Học CSS] Kỹ thuật tạo menu ngang cơ bản [NEW]

Bạn có thể tin được không? Đối với bất kỳ ai tôi không biết, đối với tôi, việc tạo menu (dù ngang hay dọc) trong CSS ban đầu rất khó khăn đối với tôi. Vì để tạo menu bằng CSS cần vận dụng rất nhiều kiến ​​thức về CSS, tuy chỉ là kiến ​​thức cơ bản nhưng chừng đó có thể sẽ khó khăn đối với người mới.

Nhờ kinh nghiệm của bản thân, tôi xin chia sẻ những cách tạo menu đơn giản nhất cho người mới bắt đầu. Bài này mình hướng dẫn tạo menu ngang và có thêm hướng dẫn tạo menu sổ xuống (trình đơn thả xuống), Tôi sẽ nói qua menu dọc trong bài tiếp theo.

Để tạo menu, tôi yêu cầu bạn xem lại tất cả các bài viết trước của loạt bài này vì chúng tôi sẽ áp dụng hầu hết các kiến ​​thức đó để tránh bạn sẽ không hiểu những gì tôi nói trong bài viết này.



Cách tạo menu ngang đơn giản

Để tạo một menu ngang, chúng tôi sẽ sử dụng. nhãn <ul> để tạo vùng menu và <li> để tạo từng mục trong menu đó. Vì vậy, đầu tiên chúng ta có cấu trúc menu HTML sau, tôi sẽ đặt menu bên trong thẻ <div> với id là #menu.

[html]

[/html]

Tiếp theo, chúng ta có CSS ​​sau để thiết lập lại CSS giúp bạn viết CSS sau này dễ dàng hơn và thêm một số kiểu cho toàn bộ trang web chẳng hạn như sử dụng font footer.

/*==Reset CSS==*/
* {
margin: 0;
padding: 0;
}

/*==Style cơ bản cho website==*/
body {
font-family: sans-serif;
color: #333;
}

Được rồi, bây giờ chúng ta sẽ làm việc trên menu.

Đầu tiên là trình bao bọc menu (tức là <ul> Trong #menu), chúng tôi sẽ sử dụng. thuộc tính list-style-type để loại bỏ các dấu đầu dòng, thêm màu nền và căn giữa văn bản bên trong cho đẹp mắt.


/*==Style cho menu===*/
#menu ul {
background: #1F568B;
list-style-type: none;
text-align: center;
}

Kết quả tạm thời của chúng tôi như sau:

[Học CSS] Kỹ thuật tạo menu ngang cơ bản [NEW]

Tiếp theo, chúng ta muốn làm cho các phần phụ nằm ngang, vậy chúng ta nên sử dụng cái gì? Có, bạn có thể sử dụng float: left cho tất cả các thẻ <li> hoặc quay lại chế độ hiển thị inline-block.

Tùy chọn 1: Kiểu khối nội tuyến (được khuyến nghị)


#menu li {
color: #f1f1f1;
display: inline-block;
width: 120px;
height: 40px;
line-height: 40px;
margin-left: -5px;
}

Tùy chọn 2: Kiểu phao


#menu li {
color: #f1f1f1;
float: left;
width: 120px;
height: 40px;
line-height: 40px;
}

Lý do tại sao tôi không có loại float margin-left: -5px đó là bởi vì 5px khác là phong cách display: inline-block nó tự tạo nên phải xóa nó theo cách này.

Nếu float, bạn nên thêm một số thuộc tính như sau cho #menu ul.


#menu ul {
background: #1F568B;
list-style-type: none;
overflow: hidden;
width: 100%;
}

Kết quả sau khi tạo kiểu Inline.

css-menu-basic-02

Và cuối cùng thêm phong cách vào các thẻ <a> bên trong, quan trọng nhất là sẽ đặt kiểu hiển thị cho các thẻ này thành một khối để nó được bao phủ bởi #menu ul.


#menu a {
text-decoration: none;
color: #fff;
display: block;
}
#menu a:hover {
background: #F1F1F1;
color: #333;
}

Kết quả khi hoàn thành:

css-menu-basic-0

Xem trực tiếp:

[codepen id=”vEqPJG”]

Cách tạo menu thả xuống đơn giản

Bây giờ chúng ta cũng có một menu giống như ở trên, nhưng tôi muốn phần Tin tức có thêm một vài menu con nữa, vì vậy tôi sẽ đặt thêm một tab <ul> lồng trong các mục và thẻ Tin tức <ul> Điều này sẽ mang lại đẳng cấp sub-menu để dễ dàng sử dụng lại sau này.

[html highlight=”6-10″]

[/html]

Và CSS tương tự ở trên để tạo menu đơn giản trước.


/*==Reset CSS==*/
* {
margin: 0;
padding: 0;
}

/*==Style cơ bản cho website==*/
body {
font-family: sans-serif;
color: #333;
}

/*==Style cho menu===*/
#menu ul {
background: #1F568B;
list-style-type: none;
text-align: center;
}
#menu li {
color: #f1f1f1;
display: inline-block;
width: 120px;
height: 40px;
line-height: 40px;
margin-left: -5px;
}
#menu a {
text-decoration: none;
color: #fff;
display: block;
}
#menu a:hover {
background: #F1F1F1;
color: #333;
}

Kết quả là bây giờ, bạn sẽ thấy menu con Tin tức được hiển thị như sau:

basic-drop-menu-01

Được rồi, vì vậy trước tiên chúng ta cần đưa ra .sub-menu ẩn nó đi.


/*==Dropdown Menu==*/
.sub-menu li {
display: none;
}

Bây giờ, chúng tôi muốn tùy chỉnh .sub-menu sẽ hiển thị (nếu hiển thị) bên ngoài phần #menu ul để nó không bị đẩy lên như vậy. Như chúng ta đã tìm hiểu ở bài trước, để tùy chỉnh vị trí của một phần tử mà không ảnh hưởng đến các phần tử khác, chúng ta sẽ sử dụng thuộc tínhposition. Nhưng chúng tôi muốn .sub-menu nó phải ở gần menu mẹ, sau đó chúng ta phải đặt nó #menu li thành phong cách relative Tại vì #menu li là các mục cấp cao nhất, tôi gọi chúng là menu mẹ.


#menu li {
position: relative;
}

Và tiếp theo là cho .sub-menu thành phong cách absolute để nó luôn nằm trong menu chính, tức là trong #menu li cái đó. Chúng tôi viết lại đoạn văn .sub-menu như sau:


.sub-menu {
display: none;
position: absolute;
}

Và cuối cùng, chúng tôi sẽ cho anh ta .sub-menu sẽ được hiển thị khi chúng tôi di chuột qua menu chính, vì vậy chúng tôi sẽ kết hợp với một lớp giả của :hover để làm điều này. Để hiển thị nó, chúng tôi chỉ định display: block cho nó.


#menu li:hover .sub-menu {
display: block;
}

Đoạn văn #menu li:hover .sub-menu nghĩa là khi chúng ta kéo chuột vào #menu li sau đó nó sẽ thực hiện các thay đổi đối với .sub-menu.

Thêm một chút CSS vào menu con bên trong để nó loại bỏ phần lề không cần thiết.

.sub-menu li {
margin-left: 0 !important;
}

Bùm!

[codepen id=”yydwzq”]

Bạn đa lam được chưa? Nhìn chung thì đơn giản, nhưng bạn cứ thử vài lần cho đến khi không cần xem hướng dẫn nữa, vì nó rất quan trọng sau này khi bắt đầu tạo các giao diện web engine hoàn chỉnh đó. : D

5/5 – (7 phiếu bầu)

Tiếp tục đọc trong bộ truyện