[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ính float: left; sẽ giúp các phần tử nằm trên cùng 1 hàng, thuộc tính margin-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ính position: 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ính padding: 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ính display: 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ính display: 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 !