×

Cách sử dụng thẻ <menu> và <menuitem> để tạo menu trong HTML

Avatar of admin
admin 0 Views

Khi xây dựng một trang web hoặc ứng dụng web, việc tạo ra một menu điều hướng hiệu quả là vô cùng quan trọng. Trong HTML, thẻ <menu> và <menuitem> đã từng được sử dụng để tạo các menu điều hướng và danh sách lựa chọn. Tuy nhiên, cần lưu ý rằng hiện tại các thẻ này đã bị loại bỏ trong các phiên bản HTML mới nhất và không được hầu hết các trình duyệt hiện đại hỗ trợ. Thay vào đó, hãy xem xét sử dụng các thẻ và thuộc tính CSS có liên quan để đạt được kết quả tương tự và đáp ứng tiêu chuẩn web hiện đại. Tuy nhiên, bài viết này sẽ giúp bạn hiểu rõ hơn về cách sử dụng các thẻ này trong một ngữ cảnh có thể áp dụng, cũng như giải pháp thay thế.

Thẻ <menu> và <menuitem>

Thẻ <menu>

Thẻ <menu> từng được sử dụng để định nghĩa một menu danh sách. Cú pháp cơ bản của thẻ này như sau:

<menu>
  <menuitem label="Item 1"></menuitem>
  <menuitem label="Item 2"></menuitem>
  <menuitem label="Item 3"></menuitem>
</menu>

Thẻ <menuitem>

Thẻ <menuitem> được sử dụng bên trong một thẻ <menu> để định nghĩa các mục cụ thể trong menu này. Ví dụ:

<menu>
  <menuitem label="Trang chủ"></menuitem>
  <menuitem label="Dịch vụ"></menuitem>
  <menuitem label="Liên hệ"></menuitem>
</menu>

Giải pháp thay thế hiện đại

Hiện tại, do sự không hỗ trợ của trình duyệt, ta thay thế việc sử dụng <menu> và <menuitem> bằng các thẻ <ul> và <li>, cùng với CSS để tạo kiểu.

Tạo menu điều hướng bằng thẻ <ul> và <li>

Dưới đây là một ví dụ về cách tạo menu điều hướng bằng các thẻ <ul> và <li>:

<nav>
  <ul>
    <li><a href="#home">Trang chủ</a></li>
    <li><a href="#services">Dịch vụ</a></li>
    <li><a href="#contact">Liên hệ</a></li>
  </ul>
</nav>

Thêm CSS để tạo kiểu cho menu

Bạn có thể sử dụng CSS để làm cho menu của bạn trở nên hấp dẫn hơn. Dưới đây là một ví dụ cơ bản:

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}

nav ul li {
  margin-right: 20px;
}

nav ul li a {
  text-decoration: none;
  color: #000;
}

nav ul li a:hover {
  color: #007BFF;
}

Giải thích CSS

  1. list-style-type: none;: Bỏ ký tự dấu chấm tròn đứng trước mỗi mục trong danh sách.
  2. padding: 0; và margin: 0;: Loại bỏ các khoảng trống mặc định của thẻ <ul>.
  3. display: flex;: Sử dụng Flexbox để đặt các mục trong dòng, tạo kết cấu theo chiều ngang cho menu.
  4. margin-right: 20px;: Tạo khoảng cách giữa các mục trong menu.
  5. text-decoration: none;: Bỏ gạch chân mặc định của các thẻ <a>.
  6. color: #000;: Đặt màu chữ là màu đen.
  7. color: #007BFF;: Đặt màu chữ là màu xanh khi người dùng di chuyển chuột qua các mục trong menu (hover).

Kết luận

Mặc dù thẻ <menu> và <menuitem> không còn được sử dụng rộng rãi, việc hiểu cách sử dụng chúng và lý do tại sao chúng bị thay thế là rất quan trọng. Hiện tại, sự kết hợp giữa thẻ <ul>, <li> và các kỹ thuật CSS hiện đại là sự lựa chọn tốt nhất để tạo ra một menu điều hướng hiệu quả và thẩm mỹ cho trang web của bạn. Điều này không chỉ đảm bảo trang web tương thích với hầu hết các trình duyệt mà còn giúp bạn dễ dàng tùy chỉnh và cải tiến thiết kế theo nhu cầu riêng.

Comments

Bài viết liên quan