Tạo menu đa cấp sử dụng CSS và HTML

Bài thực hành tạo Menu đa cấp cho Website sử dụng CSS và HTML

Bước 1: Tạo cấu trúc HTML cho menu

Mình sử dụng đoạn HTML để tạo menu như sau:

<ul class="nav">
   <li><a href="#">Trang chủ</a></li>
   <li>
     <a href="#">Sản Phẩm</a>
     <ul class="sub-menu">
       <li>
           <a href="#">Hoa quả</a>
           <ul class="sub-menu">
               <li><a href="#">Táo</a></li>
               <li><a href="#">Kiwi</a></li>
               <li><a href="#">Cam</a></li>
           </ul>
        </li>
        <li><a href="#">Rau xanh</a></li>
        <li><a href="#">Đồ khô</a></li>
        <li><a href="#">Gạo</a></li>
     </ul>
   </li>
   <li><a href="#">Dịch vụ</a></li>
   <li><a href="#">Blog</a></li>
   <li><a href="#">Liên hệ</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".

Bước 2: CSS để tạo menu xịn xò cho Website

CSS để menu trông giống menu của một trang web nà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.

Cùng xem kết quả nhé:

See the Pen Thuc hanh CSS Menu by Nguyen The Cuong (@nguyen-the-cuong) on CodePen.