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



Mặc dù menu ngang vẫn được sử dụng nhiều hơn nhưng bên cạnh đó mình biết rằng có rất nhiều bạn vẫn muốn làm menu hiển thị dọc. Vì vậy trong bài viết này mình sẽ hướng dẫn các bạn kỹ thuật tạo menu dọc đơn giản mà vẫn đẹp mắt.

Về cách tạo menu dọc, chúng ta có thể thực hiện tương tự như tạo menu ngang, đó là tạo danh sách với <ul> sau đó xóa list-style-type cho các thẻ <li> bên trong là được, tuy nhiên bạn không cần làm nhiều bước như khi làm menu ngang.

Tạo menu dọc cơ bản

Ban đầu, tôi sẽ có một danh sách menu như sau:

[html]

[/html]

Đầu tiên hãy thêm CSS cho #menu ul thêm một chút màu nền cho đẹp, và đặc biệt là xóa các gạch đầu dòng của danh sách ..


#menu ul {
background: #8AD385;
width: 250px;
padding: 0;
list-style-type: none;
text-align: left;
}

Sau đó viết CSS cho các thẻ <li> để thêm chiều cao cho nó với height và thêm line-height bằng chiều cao sao cho nó đứng giữa khối.


#menu li {
width: auto;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #e8e8e8;
padding: 0 1em;
}

Cuối cùng, viết CSS cho thẻ bên trong menu, chuyển nó thành một khối và thêm các kiểu cần thiết, đồng thời tạo hiệu ứng nền khác khi di chuột qua mục menu.


#menu li a {
text-decoration: none;
color: #333;
font-weight: bold;
display: block;
}
#menu li:hover {
background: #CDE2CD;
}

Kết quả chúng tôi có là:

[codepen id=”myNbod”]

Tạo menu dọc với menu thả xuống

Để tránh sử dụng jQuery trong loạt bài CSS cơ bản này, mình sẽ hướng dẫn các bạn làm menu dọc có menu thả xuống nhưng không có tác dụng nhưng nó sẽ bật ra bên phải menu mẹ khi di chuột vào.

Bây giờ chúng ta hãy làm lại menu đơn giản ở trên và thêm các menu con như sau:

[html highlight=”4-10″]

[/html]

Và sử dụng lại CSS ở trên:

body {
font-family: sans-serif;
font-size: 15px;
}
#menu ul {
background: #8AD385;
width: 250px;
padding: 0;
list-style-type: none;
text-align: left;
}
#menu li {
width: auto;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #e8e8e8;
padding: 0 1em;
}
#menu li a {
text-decoration: none;
color: #333;
font-weight: bold;
display: block;
}
#menu li:hover {
background: #CDE2CD;
}

Bây giờ bạn có thể thấy rằng menu con trong phần Tin tức không được hiển thị, vì vậy chúng tôi sẽ viết thêm CSS cho nó như sau.

Trước hết, hãy cho anh ta #menu li về phong cách hiển thịrelative.


#menu ul li {
position: relative;
}

Và chuyển #menu .sub-menu (Trình đơn cấp 2) trong. hình thức absolute sau đó điều chỉnh vị trí hiển thị của nó sang phải 250px (bằng chiều rộng menu) và đưa nó đến gần cạnh trên cùng của phần tử mẹ.


#menu .sub-menu {
position: absolute;
left: 250px;
top: 0;
}

Kết quả là, nó bây giờ bị thụt vào một bên.

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

Ảnh này không có thuộc tính top: 0

Bây giờ chỉ cần viết thêm CSS vào .sub-menu Hiển thị và ẩn khi di chuột #menu li chứa .sub-menu Xin vui lòng.


#menu .sub-menu {
position: absolute;
left: 250px;
top: 0;
display: none;
}
#menu li:hover .sub-menu {
display: block;
}

Kết quả như bên dưới.

[codepen id=”emqYjx”]

Thật đẹp phải không? Và mình muốn nói thêm là chỉ đơn giản là làm menu đơn giản thôi, muốn làm menu đẹp hơn thì bạn phải biết cách làm menu đơn giản như vậy, sau này bạn có thể tham khảo thêm một số bài hướng dẫn trên mạng để làm nhé. theo dõi.

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

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