![[CSS Căn bản] Cách tạo menu đa cấp sử dụng CSS và HTML](https://tuandc.com/wp-content/uploads/2017/07/use-CSS.png)
[CSS Căn bản] Cách tạo menu đa cấp sử dụng CSS và HTML

Khi bạn đã có kiến thức cơ bản về HTML và CSS bạn có thể tạo ra được cấu trúc của một website hoàn chỉnh và đẹp mắt. Có nhiều thứ để làm, để cấu tạo lên một trang web hoàn chỉnh cần trải qua một quá trình lâu dài. Trong bài viết này mình sẽ chia sẻ với bạn cách tạo ra menu đa cấp sử dụng HTML và CSS cơ bản.
Tạo cấu trúc menu đa cấp HTML
Trong bài viết cuối cùng trong series học HTML cơ bản mình đã có đưa ra một được một tệp HTML chuẩn. Có một phân vùng chứa menu.
Trong bài viết này mình sẽ sử dụng lại tệp này để thiết kế một menu đa cấp. Mình sẽ viết một đoạn HTML sử dụng thẻ danh sách <UL>
. Đoạn mã mẫu như sau
<ul class="nav">
<li><a href="#">Menu số 1</a></li>
<li>
<a href="#">Menu số 2</a>
<ul class="sub-menu">
<li><a href="#">Menu số 2.1</a></li>
<li>
<a href="#">Menu số 2.2</a>
<ul class="sub-menu">
<li><a href="#">Menu số 2.2.1</a></li>
<li><a href="#">Menu số 2.2.2</a></li>
<li><a href="#">Menu số 2.2.3</a></li>
</ul>
</li>
<li><a href="#">Menu số 2.3</a></li>
<li><a href="#">Menu số 2.4</a></li>
</ul>
</li>
<li><a href="#">Menu số 3</a></li>
<li><a href="#">Menu số 4</a></li>
<li><a href="#">Menu số 5</a></li>
</ul>
- Trong đoạn HTML bạn có thể thấy có nhiều list danh sách
<ul>
lặp lại. Mỗi danh sách<ul>
là một cấp sẽ được hiển thị. Các thẻ<ul>
con sẽ nằm trong thẻ<li>
của thẻ<ul>
cha. Thẻ<ul>
cha sẽ có class"nav"
các<ul>
sẽ có class"sub-menu"
.

Kết quả tạo menu đa cấp bằng HTML
Thêm CSS cho menu đa cấp
Bây giờ mình sẽ thêm CSS để làm menu đa cấp trở nên đẹp và hoạt động tốt hơn. Mình sẽ tạo ra một file có tên style.css
và sử dụng phương pháp linked để liên kết css từ HTML. Mình sẽ để file css cùng thư mục với html nhé nên trong phần href chỉ cần gọi tên file là đủ.

Import css sử dụng phương thức linked
Tiếp theo là mở tệp css đã tạo và thêm đoạn code sau vào
.nav>li{
float: left;
margin-right: 15px;
}
.nav>li>a{
text-transform: uppercase;
color: red;
}
.nav li{
position: relative;
list-style:none;
}
.nav li a{
padding: 10px;
line-height: 20px;
display: inline-block;
}
.nav .sub-menu{
display: none;
position: absolute;
top: 0;
left: 100%;
width: 200px;
background-color: #eee;
padding: 5px 20px;
}
.nav li:hover>.sub-menu{
display: block;
}
.nav>li>.sub-menu{
top: 40px;
left: 0;
}
Mình sẽ giải thích từng đoạn như sau:
.nav>li
: Css này được áp dụng cho các thẻ<li>
nằm ngay dưới thẻ<ul>
có class lànav
. Thuộc tínhfloat: left;
sẽ giúp các phần tử nằm trên cùng 1 hàng, thuộc tínhmargin-right: 15px;
sẽ giúp các phần tử cách nhau 15px về phía bên phải.- .nav>li>a: Css này tác động đến thẻ
<a>
nằm trong thẻ<li>
con của thẻ<ul>
có class lànav
. Thuộc tính text-transform: uppercase;
sẽ giúp cho các đoạn text trong thẻ<a>
in hoa lên,color: red;
sẽ cho các text này hiển thị màu đỏ. .nav li
: Css này tác động đến tất cả các thẻ li nằm trong thẻ<ul>
có class là nav những thẻ<li>
không nằm ngay dưới thẻ thẻ chứa class.nav
cũng sẽ bị tác động. Thuộc tínhposition: relative;
sẽ giúp các thẻ<li>
không bị ảnh hưởng với bị trí ban đầu (xem bài: [CSS Căn bản] Các thuộc tính position trong CSS).list-style:none;
sẽ giúp xóa đi các dấu chấm mặc định trong thẻ<li>
..nav li a
: Css này tác động đến tất cả thẻ<a>
trong menu. Thuộc tínhpadding: 10px;
giúp các thẻ a này có khoảng trống viền là 10px,line-height: 20px;
làm chiều cao của dòng tăng lên 20px giúp text nằm giữ dòng,display: inline-block;
sẽ giúp khóa hiển thị trên dòng, giúp các thuộc tính khác hoạt động tốt..nav .sub-menu
: Thẻ này sẽ tác động lên các thẻ<ul>
có class.sub-menu
nằm trong thẻ<ul>
có class.nav
. Thuộc tínhdisplay: none;
sẽ làm ẩn đi các thẻ này.position: absolute;
sẽ giúp cho thẻ bám vào thẻ<li>
có thuộc tính relative.top: 0;
sẽ cho phần này không có khoản trống phía trên,left: 100%;
sẽ giúp danh sách này nằm hoàn toàn về phía bên phải của thẻ<li>
chứa nó.width: 200px;
là chiều rộng của danh sách này,background-color: #eee;
là màu nền cho danh sách này,padding: 5px 20px;
sẽ giúp nó tạo khoản trống trên/dưới là 5px và phải/trái là 20px..nav li:hover>.sub-menu
: Css này sẽ được thực thi khi rê chuột vào thẻ<li>
, Tác động lên các thẻ<ul>
có class.sub-menu
. Thuộc tínhdisplay: block;
sẽ giúp khóa hiển thị và giúp thẻ<ul>
trực tiếp dưới thẻ<li>
được rê chuột vào hiển thị..nav>li>.sub-menu
: Css này tác động lên các thẻ<ul>
có class.sub-menu
. Hai thuộc tính trong đó mình sẽ không nhắc lại nữa.

Kết quả khi hoàn thành
Trong bài sau mình sẽ chia sẻ về các thuộc tính position trong CSS.
Chúc bạn thành công !
