Menu Dropdown hay còn gọi là xổ xuống đây là dạng khi hover chuột menu cấp 2 sẽ hiện ra. Thường được sử dụng khi thiết kế website bằng HTML và CSS. Bài viết dưới đây sẽ hướng dẫn tạo Menu Dropdown bằng CSS với các bước thực hiệu khá đơn giản.
Tạo menu Dropdown đa cấp xổ xuống bằng CSS
Bước 1: Đầu tiên chúng ta sẽ tạo ra một file là menu.html trên máy tính với đoạn mã HTML như sau:
<html> <head> <style> /* Mã CSS ở đây */ </style> </head> <body> <div class='main-menu'> <ul> <li> <a href='#'>Trang chủ</a> </li> <li> <a href='#'>Thủ Thuật Seo</a> </li> <li> <a href='#'>Thủ Thuật WordPress</a> </li> <li> <a href='#'>Dịch Vụ</a> <ul class='sub-menu'> <li><a href='#'>Quảng Cáo Facebook</a></li> <li><a href='#'>Quảng Cáo Google</a></li> <li><a href='#'>Dịch Vụ Seo Top Google</a></li> </ul> </li> </ul> </div> </body> </html>
Khi chưa có CSS trông sẽ như thế này
Bước 2: Tiếp theo chúng ta thêm CSS vào cặp thẻ <head>...</head>
Trước tiên phải làm cho các liên kết nằm trên một hàng bằng mã
display: inline-block;
.main-menu ul li{ display: inline-block; }
Tiếp theo ta trang trí một chút cho menu trông đẹp đơn bằng cách thêm background, chiều cao cho nó
.main-menu { background: #ddd; height: 50px; padding: 20px; }
Đặt chiều rộng width: 100%; chiều cao height là 50 và background là #ddd
– Đổi màu chữ thành màu đen, xóa bỏ gạch chân và padding
.main-menu ul li a { color: #000; text-decoration: none; padding: 20px; }
– Bây giờ sẽ ẩn menu cấp 2 đi bằng cách dùng display: none
.sub-menu { display: none; }
– Làm cho nó hiện ra khi hover chuột
.main-menu:hover .sub-menu{ display: block; }
Tuy nhiên menu cấp 2 cần phải sắp xếp để chúng nằm theo chiều dọc dùng đoạn code sau
.main-menu .sub-menu li { display: block; }
Đoạn mã CSS đầy đủ bao gồm:
.main-menu ul li{ display: inline-block; } .main-menu { background: #ddd; height: 50px; padding: 20px; } .main-menu ul li a { color: #000; text-decoration: none; padding: 20px; } .sub-menu { display: none; padding: 20px; } .main-menu li { position: relative; } .main-menu li:hover .sub-menu{ display: block; } .main-menu li .sub-menu{ position: absolute; top: 20; left: 0; } .main-menu .sub-menu li { display: block; background: #897; width: 250px; padding: 20px 0; }
Giải thích:
- Đầu tiên chúng ta sẽ thiết lập cho
.main-menu li
trở thành phần tử cha của.sub-menu
bằng thuộc tínhposition: relative
. - Tiếp theo đó sử dụng
position: absolute;
cho phần tử .sub-menu để căn chỉnh vị trí
Lưu ý: Để menu cấp 2 hiện ra cần phải thiết lập position: relative
cho phần tử cha, position: absolute
cho phần tử con.
Kết quả cuối cùng bạn đã tạo được một menu xổ xuống bằng CSS rồi đó: