3 bước tạo menu trong HTML & CSS kiểu ngang, dọc đơn giản

Trong đó, chúng ta sẽ sử dụng thẻ

để tạo khu vực menu và thẻ
• để tạo từng mục trong menu. Đoạn mã HTML sẽ như sau:

  
    
  
      
  Trang chủ
      
  Giới thiệu
      
  Sản phẩm
      
  Hỏi đáp
      
  Liên hệ
    
  

  Bước 2: Viết CSS để có được một menu hoàn chỉnh

  Đầu tiên, để dễ dàng cho việc viết CSS sau này, chúng ta sẽ thực hiện việc Reset CSS bằng đoạn mã sau:

  /* Reset CSS */
  * {
    margin: 0;
    padding: 0;
  }

  Tiếp theo, chúng ta sẽ viết CSS cho phần “body” với đoạn mã sau:

  /* Style cơ bản cho website */
  body {
    font-family: sans-serif;
    color: #222;
  }

  Đến đây, menu của bạn sẽ trông như thế này:

  
  Menu ban đầu

  
  Ghép Khối Tư Duy - Kiến Tạo Tương Lai Số

  Bước 3 – Viết CSS cho từng dạng Menu ngang/dọc

  Menu ngang

  Cùng tìm hiểu cách tạo menu ngang trong HTML & CSS ngay dưới đây nhé!

  Vì thẻ

  trong HTML dùng để tạo danh sách, mặc định sẽ có dấu “chấm” ở đầu mỗi dòng. Vì vậy, chúng ta sẽ dùng thuộc tính list-style-type để xóa đi những dấu chấm này. Đồng thời, ta cũng sẽ đổi màu nền cho menu bằng thuộc tính background-color.

  Xem thêm : Thử tài trí não với các bài toán tư duy logic

  Đoạn mã CSS dưới đây sẽ cho menu được căn giữa bằng thuộc tính text-align để menu được đặt giữa sẽ đẹp hơn. Đoạn CSS sẽ như sau:

  /* Style cho menu */
  #menu ul {
    background: #7FFFD4;
    list-style-type: none;
    text-align: center;
  }

  Các bạn có thể lấy các mã màu tại htmlcolorcodes.com. Khi đến bước này, menu của chúng ta sẽ trông như thế này:

  
  Menu ngang

  Nhưng cái chúng ta cần là menu ngang, vậy tiếp theo cần phải làm gì? Để các mục con xếp thành hàng ngang, bạn có 2 sự lựa chọn:

  • Sử dụng kiểu hiển thị (display) inline-block
  • Sử dụng float: left cho tất cả thẻ

  Cách 1: Kiểu inline block

  Sau đây là đoạn mã CSS cho kiểu inline block:

  #menu li {
    color: #f1f1f1;
    display: inline-block;
    width: 120px;
    height: 40px;
    line-height: 40px;
  }

  Với thuộc tính color, mã màu #f1f1f1 sẽ cho ra màu trắng. Tiếp theo sẽ thêm thuộc tính width (chiều rộng) và height (chiều cao). Lúc này, các mục vẫn chưa được căn giữa, vì vậy cần bổ sung thuộc tính line-height với giá trị bằng height để các mục con đứng giữa block. Kết quả sẽ như hình dưới đây:

  
  Menu ngang với kiểu hiển thị inline block

  Cách 2: Kiểu float

  Với kiểu float, sau đây là đoạn mã CSS:

  #menu li {
    color: #f1f1f1;
    float: left;
    width: 120px;
    height: 40px;
    line-height: 40px;
  }

  Nếu bạn dùng kiểu float, cần phải thêm một vài thuộc tính cho #menu ul như sau:

  #menu ul {
    background: #f1f1f1;
    list-style-type: none;
    overflow: hidden;
    width: 100%;
  }

  Sau khi xếp các mục thành hàng ngang bằng 2 cách trên, cuối cùng ta sẽ trang trí menu bằng cách thêm style cho thẻ như sau:

  #menu ul li a {
    color: #f1f1f;
    text-decoration: none;
    display: block;
  }

  Thuộc tính text-decoration là thuộc tính làm cho mục con trong menu có đường gạch dưới, vì thế để mất đi đường gạch chân, ta sẽ để “none”. Quan trọng nhất là đặt kiểu hiển thị (display) cho các thẻ này thành “block” để chúng phủ kín cái #menu ul.

  Kết quả cuối cùng sẽ như sau:

  
  Menu ngang cuối cùng

  Menu ngang có dropdown (đổ xuống)/menu đa cấp

  Nếu bạn muốn trong mục Sản phẩm sẽ có các menu con, thì sẽ phải làm như thế nào? Sau đây sẽ là phần code tạo dropdown menu trong HTML để bạn tham khảo.

  Đầu tiên, bạn cần viết HTML, việc này tương tự bước 1 nhưng có chút khác bởi vì bạn cần bổ sung thêm thẻ

  bên trong item “Sản phẩm” và sẽ mang class sub-menu để tạo menu con trong HTML.

  
    
  
      
  Trang chủ
      
  Giới thiệu
      
  
        Sản phẩm
        
  
          
  Thiết kế website
          
  Dịch vụ SEO
          
  Hosting
        
      
      
  Hỏi đáp
      
  Liên hệ
    
  

  Tiếp theo, bạn sẽ viết CSS cho menu:

  /* Style cho menu */
  body {
    font-family: sans-serif;
    color: #222;
  }
  
  #menu ul {
    background: #7FFFD4;
    width: 250px;
    padding: 0;
    list-style-type: none;
    text-align: left;
  }
  
  #menu li {
    width: auto;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #282828;
    padding: 0 1em;
  }
  
  #menu li a {
    text-decoration: none;
    color: #0C0A0A;
    font-weight: bold;
    display: block;
  }
  
  #menu li:hover {
    background: #f1f1f1;
  }

  Kết quả thu được sẽ như hình ảnh sau đây:

  
  Menu ngang có dropdown

  Menu dọc

  Sau khi bạn đã thực hiện xong bước 1 và bước 2, ta sẽ đến phần cách tạo menu dọc trong HTML. Đầu tiên, chúng ta sẽ thêm CSS vào #menu ul để chỉnh style bằng cách dùng thuộc tính list-style-type, thêm màu nền, thuộc tính padding và căn chỉnh bên lề trái.

  #menu ul {
    background: #7FFFD4;
    width: 250px;
    padding: 0;
    list-style-type: none;
    text-align: left;
  }

  Xem thêm : Bảng quy đổi điểm VSTEP sang điểm IELTS, TOEIC, TOEFL,…

  Đến đây, kết quả sẽ hiển thị như sau:

  
  Menu dọc

  Tiếp theo, ta sẽ viết CSS cho các thẻ

  • , ta sẽ thêm chiều cao (height) và thêm khoảng cách giữa các dòng (line-height) bằng với chiều cao để mục con đứng giữa block. Sau đó, ta sẽ thêm thuộc tính border-bottom để định dạng đường viền.

    #menu li {
      width: auto;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #282828;
      padding: 0 1em;
    }

    Kết quả tạm thu được như sau:

    
    Menu dọc với style căn chỉnh và đường viền

    Cuối cùng là viết CSS cho thẻ bên trong menu, chuyển nó qua thành block và thêm các style cần thiết, đồng thời tạo thêm hiệu ứng background khác khi rê chuột vào mục menu.

    Cuối cùng, chúng ta sẽ tiến hành viết CSS cho thẻ trong menu. Chúng ta sẽ chuyển sang block, thêm style, loại bỏ gạch chân, in đậm cho chữ và thêm hiệu ứng khi rê chuột vào. Chúng ta sẽ có đoạn mã như sau:

    #menu li a {
      text-decoration: none;
      color: #0C0A0A;
      font-weight: bold;
      display: block;
    }
    
    #menu li:hover {
      background: #f1f1f1;
    }

    Đây là kết quả thu được sau khi hoàn thành việc tạo menu dọc:

    
    Menu dọc cuối cùng

    Menu dọc có dropdown (đổ xuống)

    Ví dụ rằng bây giờ bạn muốn ở mục Sản phẩm sẽ có thêm vài menu con nữa thì cần phải làm gì? Dưới đây sẽ là phần hướng dẫn để tạo menu dropdown trong HTML.

    Đầu tiên sẽ tương tự như bước 1 nhưng sẽ có một chút khác bởi vì bạn cần phải thêm một số thẻ để tạo sub-menu (menu con).

    
      
    
        
    Trang chủ
        
    Giới thiệu
        
    
          Sản phẩm
          
    
            
    Thiết kế website
            
    Dịch vụ SEO
            
    Hosting
          
        
        
    Hỏi đáp
        
    Liên hệ
      
    

    Tiếp theo, ta sẽ đến bước tiếp theo là viết CSS cho menu:

    body {
      font-family: sans-serif;
      font-size: 15px;
    }
    
    #menu ul {
      background: #7FFFD4;
      width: 250px;
      padding: 0;
      list-style-type: none;
      text-align: left;
    }
    
    #menu li {
      width: auto;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #282828;
      padding: 0 1em;
    }
    
    #menu li a {
      text-decoration: none;
      color: #0C0A0A;
      font-weight: bold;
      display: block;
    }
    
    #menu li:hover {
      background: #f1f1f1;
    }

    Kết quả thu được sẽ như hình ảnh sau đây:

    
    Menu dọc có dropdown

    Lúc này, các mục con trong mục Sản phẩm đang bị lỗi hiển thị. Vì thế, chúng ta cần bổ sung phần code CSS bằng cách đưa #menu li về dạng hiển thị kiểu relative. Đoạn code CSS sẽ trông như sau:

    #menu ul li {
      position: relative;
    }

    Kế tiếp, ta sẽ chuyển menu cấp 2 (tức #menu .sub-menu) về dạng absolute, chỉnh vị trí thụt sang bên trái với giá trị 250px bằng với chiều rộng của menu và đồng thời đưa về độ cao bằng phần tử mẹ.

    #menu .sub-menu {
      position: absolute;
      left: 250px;
      top: 0;
    }

    Mặc dù, đến đây đã có menu dropdown rồi, nhưng bạn muốn là khi rê chuột đến thì menu con mới hiện ra thì sẽ thực hiện với đoạn mã như sau:

    #menu .sub-menu {
      position: absolute;
      left: 250px;
      top: 0;
      display: none;
    }
    
    #menu li:hover .sub-menu {
      display: block;
    }

    Đây chính là kết quả cuối cùng của menu dọc có dropdown!

    Tóm lại, qua bài viết này, bạn đã tìm hiểu về 3 bước đơn giản để tạo menu trong HTML & CSS kiểu ngang và dọc. Tóm lại, để tạo menu, bước đầu tiên là viết HTML, bước 2 là viết reset CSS và bước 3 là viết CSS theo từng loại menu ngang/dọc. Hy vọng rằng bài viết này đã giúp cho các bạn mới tiếp xúc với HTML & CSS dễ dàng tạo menu kiểu ngang và dọc cho mình nhé!

    Nguồn: https://ispacedanang.edu.vn
    Danh mục: Học tập