Làm menu cấp 3 phần 1
19/05/2019
Hôm nay, Master FrontEnd xin hướng dẫn các bạn làm menu cấp 3 đơn giản.
Đầu tiên, Tạo cấu trúc HTML menu cấp 3:
<ul class="menu-cap3 clearfix" >
<li><a href="#" >Trang chủ</a> </li>
<li>
<a href="#" >Sản phẩm</a>
<ul class="menu-sub" >
<li><a href="#" >Sản phẩm A</a> </li>
<li>
<a href="#" >Sản phẩm B</a>
<ul class="menu-sub" >
<li><a href="#" >Sản phẩm B - 1</a> </li>
<li><a href="#" >Sản phẩm B - 2</a> </li>
<li><a href="#" >Sản phẩm B - 3</a> </li>
<li><a href="#" >Sản phẩm B - 4</a> </li>
</ul>
</li>
<li><a href="#" >Sản phẩm C</a> </li>
<li><a href="#" >Sản phẩm D</a> </li>
</ul>
</li>
<li>
<a href="#" >Về chúng tôi</a>
<ul class="menu-sub" >
<li><a href="#" >Lịch sử hình thành</a> </li>
<li><a href="#" >Mục tiêu và sứ mệnh</a> </li>
<li><a href="#" >Đối tác</a> </li>
</ul>
</li>
<li><a href="#" >Chính sách</a> </li>
<li><a href="#" >Liên hệ</a> </li>
</ul>
- Reset margin, padding tất cả trình duyệt.
- Tạo class clearfix để giải quyết hậu quả của float
- Cho độ rộng menu 1200px và canh lề 2 bên với margin: 0 auto;
- Cho menu cấp 1 dàn hàng ngang với thuộc tính float: left;
- Style thẻ a của menu cấp 1 với padding, font size,...
*{margin:0;padding:0;}
.clearfix:before,.clearfix:after{
content: '';
display: table;
clear: both;
}
.menu-cap3{
width: 1200px;
margin: 0 auto;
list-style: none;
background-color: #e89e52;
}
.menu-cap3 > li{
float: left;
}
.menu-cap3 > li a{
font-size: 16px;
display: block;
padding: 10px 15px;
text-decoration: none;
border-right: 1px solid #e0caca;
color: #fff;
}
.menu-cap3 > li:last-child a{
border-right: 0;
}
Ta được kết quả như hình:
- Cho thẻ li của menu thuộc tính position: relative; để ta canh chỉnh vị trí của sub menu theo li.
- Style menu sub (cấp 2, 3) với menu cấp 2 nằm dưới menu cấp 1 và menu cấp 3 nằm bên phải menu cấp 2 ta sử dụng thuộc tính position: absolute; kèm theo top, left.
.menu-cap3 li{
position: relative;
}
.menu-cap3 li .menu-sub{
list-style: none;
position: absolute;
top: 100%;
left: 0;
width: 200px;
box-shadow: 0px 1px 8px -4px #333;
background-color: #e89e51;
}
Ta được kết quả như hình:
- Cho menu cấp 2,3 display: none. Và khi hover vào thẻ li cấp 1 thì cho menu cấp 2 hiển thị, hover li của menu cấp 2 thì menu cấp 3 hiển thị với thuộc tính display: block;
- Thêm hiệu ứng hover thì đổi màu nền cho thẻ a
.menu-cap3 li .menu-sub{
display: none;
}
.menu-cap3 li:hover > ul{
display: block;
}
.menu-cap3 li:hover > a {
background: #b36c22;
}
Yeah, Như vậy thì chỉ với vài dòng code ta đã làm được menu cấp 3 (Với css ở trên thì nếu tạo thêm menu cấp 4,5 vẫn chạy tốt) đơn giản. Xem link demo ở đây nhé. Tổng hợp CSS đã viết :
*{margin:0;padding:0;}
.clearfix:before,.clearfix:after{
content: '';
display: table;
clear: both;
}
.menu-cap3{
width: 1200px;
margin: 0 auto;
list-style: none;
background-color: #e89e52;
}
.menu-cap3 > li{
float: left;
}
.menu-cap3 > li a{
font-size: 16px;
display: block;
padding: 10px 15px;
text-decoration: none;
border-right: 1px solid #e0caca;
color: #fff;
}
.menu-cap3 > li:last-child a{
border-right: 0;
}
.menu-cap3 li{
position: relative;
}
.menu-cap3 li .menu-sub{
list-style: none;
position: absolute;
top: 100%;
left: 0;
width: 200px;
box-shadow: 0px 1px 8px -4px #333;
background-color: #e89e51;
display: none;
}
.menu-cap3 li .menu-sub ul{
top: 0;
left: 100%;
}
.menu-cap3 li:hover > ul{
display: block;
}
.menu-cap3 li:hover > a {
background: #b36c22;
}
