Làm menu cấp 3 phần 1

19/05/2019

Bài sau » « Bài trước

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:

Làm menu cấp 3

- 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:

Làm menu cấp 3

- 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; }

Bài sau » « Bài trước
Back to top