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

[sourcecode language=”plain”]
<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>
[/sourcecode]

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

[sourcecode language=”plain”]
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*/
}
[/sourcecode]

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

ul#menu li a {
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;

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

  1. có thể giúp em làm cái menu dọc 2 cấp nhưng cho hiện sẵn luôn ko ạ? Menu chính nằm ở cột 1, menu con nằm ở cột 2 bên cạnh menu chính và hiện sẵn luôn chứ ko cần kích vào menu chính mới hiện menu con. khi rê chuột vào menu chính thì menu con thay đổi tương ứng theo. khi chọn 1 item menu con thì background của item menu chính và item menu con vừa được chọn được lưu giữ lại (để biết người dùng vừa chọn mục nào). giúp em với ạ

    Reply

Leave a Comment