<menu>: Phần tử Menu
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Phần tử <menu> trong HTML được mô tả trong đặc tả HTML là lựa chọn thay thế ngữ nghĩa cho <ul>, nhưng được trình duyệt xử lý (và được hiển thị qua cây tiếp cận) không khác gì <ul>. Nó đại diện cho một danh sách không có thứ tự các mục (được đại diện bởi các phần tử <li>).
Try it
<div class="news">
<a href="#">NASA's Webb Delivers Deepest Infrared Image of Universe Yet</a>
<menu>
<li><button id="save">Save for later</button></li>
<li><button id="share">Share this news</button></li>
</menu>
</div>
.news {
background-color: bisque;
padding: 1em;
border: solid thin black;
}
menu {
list-style-type: none;
display: flex;
padding: 0;
margin-bottom: 0;
gap: 1em;
}
Thuộc tính
Phần tử này cũng chấp nhận các thuộc tính toàn cục.
compactDeprecated-
Thuộc tính Boolean này gợi ý rằng danh sách nên được hiển thị theo kiểu compact. Cách hiểu thuộc tính này phụ thuộc vào trình duyệt. Hãy sử dụng CSS thay thế: để tạo hiệu ứng tương tự thuộc tính
compact, thuộc tính CSSline-heightcó thể được sử dụng với giá trị80%.
Ghi chú sử dụng
Cả hai phần tử <menu> và <ul> đều đại diện cho một danh sách không có thứ tự các mục. Sự khác biệt chính là <ul> chủ yếu chứa các mục để hiển thị, trong khi <menu> đại diện cho một thanh công cụ chứa các lệnh mà người dùng có thể thực hiện hoặc kích hoạt.
Note:
Trong các phiên bản đầu của đặc tả HTML, phần tử <menu> có thêm trường hợp sử dụng như một menu ngữ cảnh. Chức năng này được coi là lỗi thời và không có trong đặc tả.
Ví dụ
Thanh công cụ
Trong ví dụ này, <menu> được sử dụng để tạo một thanh công cụ cho ứng dụng chỉnh sửa.
HTML
<menu>
<li><button onclick="copy()">Copy</button></li>
<li><button onclick="cut()">Cut</button></li>
<li><button onclick="paste()">Paste</button></li>
</menu>
Lưu ý rằng điều này về mặt chức năng không khác gì:
<ul>
<li><button onclick="copy()">Copy</button></li>
<li><button onclick="cut()">Cut</button></li>
<li><button onclick="paste()">Paste</button></li>
</ul>
CSS
menu,
ul {
display: flex;
list-style: none;
padding: 0;
width: 400px;
}
li {
flex-grow: 1;
}
button {
width: 100%;
}
Kết quả
Tóm tắt kỹ thuật
| Danh mục nội dung |
Nội dung luồng. Nếu các con của phần tử bao gồm ít nhất một
phần tử |
|---|---|
| Nội dung được phép |
Không hoặc nhiều lần xuất hiện của |
| Bỏ qua thẻ | Không, cả thẻ mở và thẻ đóng đều bắt buộc. |
| Phần tử cha được phép | Bất kỳ phần tử nào chấp nhận nội dung luồng. |
| Vai trò ARIA ngầm định |
list
|
| Vai trò ARIA được phép |
directory, group,
listbox, menu, menubar,
none, presentation,
radiogroup, tablist,
toolbar hoặc tree
|
| Giao diện DOM | HTMLMenuElement |
Thông số kỹ thuật
| Specification |
|---|
| HTML # the-menu-element |