Categories CSS

Hướng dẫn tạo Menu xổ bằng code CSS đơn giản

Menu xổ là một trong những thành phần cơ bản nhất cho mọi trang web có nhiều điều hướng – cái mà menu thường theo kiểu dàn trải tất cả không thể thay thế được vì chiếm quá nhiều diện tích.

Menu xổ

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ự.


#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.

  • Menu 1
  • Menu 2
    • Sub Menu 1
    • Sub Menu 2
    • Sub Menu 3
  • Menu 3
  • Menu 4
  • Menu 5

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

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*/
}

Để trang trí đơn giản cho menu tôi thêm đoạn css:

ul#menu li a {
text-decoration:none;
background-color:#900;
padding: 5px;
color:white;
}

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

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

Comments are closed.

Back to Top