Hôm nay tôi và bạn sẽ cùng thực hành tạo menu xổ, tiếng Anh là dropdown menu, chúng ta sẽ code hoàn toàn bằng CSS chứ không cần Javascript, ngoài ra cũng chú ý để viết code sao cho đơn giản nhất có thể được mà vẫn tạo ra hiệu quả tương tự. Bạn có thể xem demo kết quả cuối cùng ở đây.
#1. Tạo mã HTML cho menu
Menu sử dụng danh sách không có thứ tự, tức là thẻ ul và li. Cụ thể mã sẽ kiểu như này:
<ul id="menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul id="sub">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
Bạn có thể thấy, Menu 2 chính là cái xổ ra, những menu còn lại là thường. Kết quả của đoạn code trên sẽ như dưới đây, vì bạn chưa CSS gì cả nên chúng ta chưa có hiệu ứng nào.
#2. Tạo Style cho Menu
Đến bước này ta mới bắt đầu dùng CSS, trước tiên chúng ta bỏ mấy dấu chấm tròn và cho menu dàn hàng ngang. Code CSS
list-style-type: none; /* code này để bỏ các dấu chấm tròn*/
float: left; /* code này để menu dàn hàng ngang*/
margin-right: 10px; /* tạo lề cho các menu*/
}
Đây là kết quả của bước thứ hai:
Để trang trí đơn giản cho menu tôi thêm đoạn css:
text-decoration:none;
background-color:#900;
padding: 5px;
color:white;
}
Kết quả:
#3. Ẩn đi Sub Menu
Các Sub Menu 1 cho đến Sub Menu 3 sẽ bị ẩn đi, vì chúng chỉ hiện ra khi được hover qua Menu 2. Chúng ta sử dụng thuộc tính display để làm ẩn các sub menu:
ul#menu li ul#sub {
display: none;
}
Kết quả:
#4. Hover qua thì làm xuất hiện Sub Menu
Để hover qua Menu thì các submenu xuất hiện ta sử dụng đoạn CSS
ul#menu li:hover ul#sub {
display: block;
}
Nhưng bạn sẽ thấy các submenu xuất hiện chiếm không gian và làm xê dịch các menu cha. Để tránh điều này ta phải để thuộc tính position của submenu là absolute, và menu cha là relative, code mẫu:
ul#menu li {
positon: relative;
}
ul#menu li ul#sub {
display: none;
position: absolute;
width: 100px;
}
Cái width: 100px là tùy chọn, mục đích để submenu dàn theo hàng dọc, nếu không có, nó sẽ dàn theo hàng ngang, tùy theo độ lớn của submenu mà bạn điều chỉnh giá trị này sao cho phù hợp để đạt được kết quả vừa mắt.
Muốn submenu hiện ngay ngắn hàng lối với menu được hover ta thêm đoạn code:
ul#menu, ul#menu ul#sub {
padding:0;
margin: 0;
}
Tổng kết, đoạn code mẫu CSS
Dưới đây là tổng hợp tất cả các CSS ở trên, nó hiện đã đủ để làm menu xổ, dĩ nhiên để đẹp hơn bạn cần tự tinh chỉnh thêm CSS cho bản thân.ul#menu, ul#menu ul#sub {
padding:0;
margin: 0;
}
ul#menu li {
list-style-type: none; /* code này để bỏ các dấu chấm tròn*/
float: left; /* code này để menu dàn hàng ngang*/
margin-right: 10px; /* tạo lề cho các menu*/
}
ul#menu li a {
text-decoration: none;
background-color: #900;
padding: 5px;
color: white;
}
ul#menu li {
positon: relative;
}
ul#menu li ul#sub {
display: none;
position: absolute;
width: 100px;
}
ul#menu li ul#sub li {
margin-top: 10px;
margin-bottom: 5px;
}
ul#menu li:hover ul#sub {
display: block;
