This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
HTML <menu>
요소는 사용자가 수행하거나 하는 명령 묶음을 말합니다. 이것은 스크린 위에 나오는 목록 메뉴와 눌려진 버튼 아래에 나오는 것과 같은 맥락 메뉴를 포함합니다.
Content categories | Flow content. Additionally, if in the list menu state, palpable content. (list menu is the default state, unless the parent element is a <menu> in the context menu state.) |
---|---|
Permitted content | If the element is in the list menu state: flow content, or alternatively, zero or more occurrences of <li> , <script> , and <template> .If the element is in the context menu state: zero or more occurrences, in any order, of <menu> (context menu state only), <menuitem> , <hr> , <script> , and <template> . |
Tag omission | None, both the starting and ending tag are mandatory. |
Permitted parent elements | Any element that accepts flow content. |
DOM interface | HTMLMenuElement |
속성
이 요소는 전역 속성을 포함합니다.
label
- 사용자에게 보여지는 메뉴의 이름입니다. Used within nested menus, to provide a label through which the submenu can be accessed. Must only be specified when the parent element is a
<menu>
in the context menu state. type
- This attribute indicates the kind of menu being declared, and can be one of two values.
context
: The context menu state, which represents a group of commands activated through another element. This might be through themenu
attribute of a<button>
, or an element with acontextmenu
attribute. When nesting<menu>
elements directly within one another, this is the missing value default if the parent is already in this state.list
: The list menu state, which represents a series of commands for user interaction. This is the missing value default, except where the parent element is a<menu>
in the context menu state.
Examples
Example 1
<!-- A button, which displays a menu when clicked. --> <button type="menu" menu="dropdown-menu"> Dropdown </button> <menu type="context" id="dropdown-menu"> <menuitem label="Action"> <menuitem label="Another action"> <hr> <menuitem label="Separated action"> </menu>
Result
Example 2
<!-- A context menu for a simple editor, containing two menu buttons. --> <menu> <li> <button type="menu" value="File" menu="file-menu"> <menu type="context" id="file-menu"> <menuitem label="New..." onclick="newFile()"> <menuitem label="Save..." onclick="saveFile()"> </menu> </li> <li> <button type="menu" value="Edit" menu="edit-menu"> <menu type="context" id="edit-menu"> <menuitem label="Cut..." onclick="cutEdit()"> <menuitem label="Copy..." onclick="copyEdit()"> <menuitem label="Paste..." onclick="pasteEdit()"> </menu> </li> </menu>
Result
명세
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of '<menu>' in that specification. |
Living Standard | |
HTML 5.1 The definition of '<menu>' in that specification. |
Recommendation | Initial definition |
브라우저 호환성
같이 보기
- Other list-related HTML Elements:
<ol>
,<ul>
,<li>
and the obsolete<dir>
. - The
contextmenu
global attribute can be used on an element to refer to theid
of amenu
with thecontext
type
.