Cách tạo menu trong HTML

Menu là một thành phần không thể thiếu với mọi website. Nó giúp điều hướng người dùng đi tới khu vực nào đó. Từ đó sẽ giữ chân người dùng ở lại lâu hơn hoặc giúp cho họ tìm thấy thông tin cần thiết nhanh nhất.

Menu có nhiều dạng khác nhau như menu ngang, menu dọc, menu đa cấp vv… Trong bài viết này mình sẽ hướng dẫn bạn cách tạo menu trong HTML và CSS 2 cấp khi rê chuột vào.

Đây là một trong những dạng menu phổ biến nhất bởi vì là dạng Dropdown Menu. Menu con sẽ được gom nhóm trong menu cha. Để hiểu rõ hơn hãy tiếp tục theo dõi bài viết này.

Hướng dẫn cách tạo menu trong HTML

Kiến thức cần chuẩn bị đó là:

• Biết cách sử dụng thuộc tính display
• Biết cách sử dụng thuộc tính position

Bước 1: Hãy chạy tập tin html sau

<div id="menu">
  <ul>
    <li><a href="#">Trang chủ</a></li>
    <li><a href="#">Diễn đàn</a></li>
    <li><a href="#">Tin tức</a>
      <ul class="sub-menu">
        <li><a href="#">WordPress</a></li>
        <li><a href="#">SEO</a></li>
        <li><a href="#">Hosting</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Hỏi đáp</a></li>
    <li><a href="#">Liên hệ</a></li>
  </ul>
</div>

Bước 2: Thêm code CSS vào

Trước tiên mình sẽ trang trí lại cái thành menu

/*==Style cho menu===*/
#menu ul {
  background: #1F568B;
  list-style-type: none;
  text-align: center;
}
#menu li {
  color: #f1f1f1;
  display: inline-block;
  width: 120px;
  height: 40px;
  line-height: 40px;
  margin-left: -5px;
}
#menu a {
  text-decoration: none;
  color: #fff;
  display: block;
}
#menu a:hover {
  background: #F1F1F1;
  color: #333;
}

Tiếp theo đó mình sẽ CSS cho cái .sub-menu

/*==Dropdown Menu==*/
.sub-menu {
  display: none;
  position: absolute;
}
#menu li {
  position: relative;
}
#menu li:hover .sub-menu {
  display: block;
}
.sub-menu li {
  margin-left: 0 !important;
}

/*==Menu cấp 3==*/
.sub-menu > ul {
  display: none !mportant;
}

Cách thức hoạt động như sau:

• Đầu tiên bạn cần ẩn menu cấp 2 đi .sub-menu { display: none; position: absolute; }
• Tiếp theo sẽ dùng #menu li:hover .sub-menu { display: block; } để hiện cấp 2 ra khi rê chuột vào
• Sử dụng postition: relative cho menu cấp 1
• Sử dụng postition: absolute cho menu cấp 2

Lời kết: Như vậy là daibang.info vừa hướng dẫn bạn tạo menu ngang trong HTML và CSS. Bài viết này khá đơn giản tuy nhiên để thực sự hiểu được bạn cần thực hành liên tục. Và nên đọc lại về display, position bởi vì đây là 2 kiến thức cần thiết. Hơn nữa khi CSS nhiều phần khác trên website cũng cần tới 2 thuộc tính đó.