<menu>
Experimental: 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> (en-US), <hr> ,
<script> , and
<template> .
|
Tag omission | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
Permitted parent elements | Any element that accepts flow content. |
DOM interface | HTMLMenuElement (en-US) |
속성
이 요소는 전역 속성을 포함합니다.
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
(en-US) 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 |
---|
HTML Standard # the-menu-element |
브라우저 호환성
BCD tables only load in the browser
같이 보기
- Other list-related HTML Elements:
<ol>
,<ul>
,<li>
and the obsolete<dir>
(en-US). - The
contextmenu
(en-US) global attribute (en-US) can be used on an element to refer to theid
of amenu
with thecontext
type
.