diff options
Diffstat (limited to 'files/zh-cn/web/html/element/menu/index.html')
| -rw-r--r-- | files/zh-cn/web/html/element/menu/index.html | 221 |
1 files changed, 221 insertions, 0 deletions
diff --git a/files/zh-cn/web/html/element/menu/index.html b/files/zh-cn/web/html/element/menu/index.html new file mode 100644 index 0000000000..27ce5ea843 --- /dev/null +++ b/files/zh-cn/web/html/element/menu/index.html @@ -0,0 +1,221 @@ +--- +title: <menu> +slug: Web/HTML/Element/menu +tags: + - HTML + - HTML交互元素 + - UX + - Web + - 元素 + - 参考 + - 菜单 +translation_of: Web/HTML/Element/menu +--- +<div>{{HTMLRef}}{{SeeCompatTable}}</div> + +<p><strong>HTML <code><menu></code> 元素</strong>呈现了一组用户可执行或激活的命令。这既包含了可能出现在屏幕顶端的列表菜单，也包含了那些隐藏在按钮之下、当点击按钮后显示出来的文本菜单。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>. Additionally, if in the <em>list menu</em> state, palpable content. (<em>list menu</em> is the default state, unless the parent element is a {{HTMLElement("menu")}} in the <em>context menu</em> state.)</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>If the element is in the <em>list menu</em> state: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, or alternatively, zero or more occurrences of {{HTMLElement("li")}}, {{HTMLElement("script")}}, and {{HTMLElement("template")}}.<br> + If the element is in the <em>context menu</em> state: zero or more occurrences, in any order, of {{HTMLElement("menu")}} (<em>context menu</em> state only), {{HTMLElement("menuitem")}}, {{HTMLElement("hr")}}, {{HTMLElement("script")}}, and {{HTMLElement("template")}}.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{No_Tag_Omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>None</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{DOMxRef("HTMLMenuElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>该元素支持<a href="/en-US/HTML/Global_attributes">全局属性</a>，以及以下属性。</p> + +<dl> + <dt>{{HTMLAttrDef("label")}} {{Deprecated_inline}}</dt> + <dd>The name of the menu as shown to the user. 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 {{HTMLElement("menu")}} in the <em>context menu</em> state.</dd> + <dt>{{HTMLAttrDef("type")}}</dt> + <dd>This attribute indicates the kind of menu being declared, and can be one of two values. + <ul> + <li><code>context</code> {{Deprecated_inline}} : Indicates the <em>popup menu</em> state, which represents a group of commands activated through another element. This might be as a button menu referenced by a {{HTMLAttrxRef("menu", "button")}} attribute of a {{HTMLElement("button")}} element, or as context menu for an element with a <a href="/en-US/docs/HTML/Global_attributes#attr-contextmenu"><code>contextmenu</code></a> attribute. This value is the default if the attribute is missing and the parent element is also a <code><menu></code> element.</li> + <li><code>toolbar</code>: Indicates the <em>toolbar</em> state, which represents a toolbar consisting of a series of commands for user interaction. This might be in the form of an unordered list of {{HTMLElement("li")}} elements, or, if the element has no <code><li></code> element children, flow content describing available commands. This value is the default if the attribute is missing.</li> + </ul> + </dd> +</dl> + +<h2 id="使用备注">使用备注</h2> + +<p>{{HTMLElement("menu")}} 和 {{HTMLElement("ul")}} 元素都呈现了无序列表元素。最主要的区别是，{{HTMLElement("ul")}} 主要是为了展示选项，而 {{HTMLElement("menu")}} 则是为了交互。</p> + +<p>An HTML menu can be used to create context menus (typically activated by right-clicking another element) or toolbars.</p> + +<p><strong>{{anch("Context menu", "Context menus</strong>")}} consist of a <code><menu></code> element which contains {{HTMLElement("menuitem")}} elements for each selectable option in the menu, <code><menu></code> elements for submenus within the menu, and {{HTMLElement("hr")}} elements for separator lines to break up the menu's content into sections. Context menus are then attached to the element they're activated from using either the associated element's {{HTMLAttrxRef("contextmenu")}} attribute or, for {{anch("Button menu", "button-activated menus")}} attached to {{HTMLElement("button")}} elements, the {{HTMLAttrxRef("menu", "button")}} attribute.</p> + +<p><strong>{{anch("Toolbar", "Toolbar menus</strong>")}} consist of a <code><menu></code> element whose content is described in one of two ways: either as an unordered list of items represented by {{HTMLElement("li")}} elements (each representing a command or option the user can utilize), or (if there are no <code><li></code> elements), <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a> describing the available commands and options.</p> + +<p>这个元素在 HTML4 中被弃用，但在 HTML 5.1 和 HTML living standard 中被重新推荐使用。 这份文档描述的是当前 Firefox 上的实现。根据 HTML 5.1 的规定，{{HTMLElement("list")}} 元素的类型可能会更改为{{HTMLElement("toolbar")}}。</p> + +<h2 id="例子">例子</h2> + +<h3 id="右键菜单">右键菜单</h3> + +<p>{{Deprecated_header}}</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html;"><!-- A <div> element with a context menu --> +<div contextmenu="popup-menu"> + Right-click to see the adjusted context menu +</div> + +<menu type="context" id="popup-menu"> + <menuitem>Action</menuitem> + <menuitem>Another action</menuitem> + <hr/> + <menuitem>Separated action</menuitem> +</menu> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css;">div { + width: 300px; + height: 80px; + background-color: lightgreen; +} +</pre> + +<h4 id="结果">结果</h4> + +<p>{{EmbedLiveSample("Context_menu", "100%", 80)}}</p> + +<h3 id="菜单按钮">菜单按钮</h3> + +<div class="blockIndicator warning"> +<p>Menu buttons haven't been implemented in any known browsers yet. The {{HTMLAttrxRef("type", "menu")}} attribute on the <code><menu></code> element is now obsolete.</p> +</div> + +<div class="blockIndicator warning"> +<p>{{HTMLElement("menuitem")}} element is obsolete.</p> +</div> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html;"><!-- A button, which displays a menu when clicked. --> +<button type="menu" menu="popup-menu"> + Dropdown +</button> + +<menu type="context" id="popup-menu"> + <menuitem>Action</menuitem> + <menuitem>Another action</menuitem> + <hr/> + <menuitem>Separated action</menuitem> +</menu> +</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Menu_button", "100%", 50)}}</p> + +<h3 id="Toolbar" name="Toolbar">Toolbar</h3> + +<div class="blockIndicator warning"> +<p>Toolbar menus haven't been implemented in any known browsers yet.</p> +</div> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html;"><!-- A context menu for a simple editor, + - containing two menu buttons. --> +<menu type="toolbar"> + <li> + <button type="menu" menu="file-menu">File</button> + <menu type="context" id="file-menu"> + <menuitem label="New..." onclick="newFile()"> + <menuitem label="Save..." onclick="saveFile()"> + </menu> + </li> + <li> + <button type="menu" menu="edit-menu">Edit</button> + <menu type="context" id="edit-menu"> + <menuitem label="Cut..." onclick="cutEdit()"> + <menuitem label="Copy..." onclick="copyEdit()"> + <menuitem label="Paste..." onclick="pasteEdit()"> + </menu> + </li> +</menu> +</pre> + +<h4 id="结果_2">结果</h4> + +<p>{{EmbedLiveSample("Toolbar", "100%", 100)}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "grouping-content.html#the-menu-element", "<menu>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>No change from latest snapshot, {{SpecName("HTML5.3")}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.3", "grouping-content.html#the-menu-element", "<menu>")}}</td> + <td>{{Spec2("HTML5.3")}}</td> + <td>No changes</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "grouping-content.html#the-menu-element", "<menu>")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>Snapshot of the {{SpecName("HTML WHATWG")}}.<br> + Removed the <code>context</code> type.</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "interactive-elements.html#the-menu-element", "<menu>")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Snapshot of the {{SpecName("HTML WHATWG")}}.<br> + Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.menu")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>Other list-related HTML Elements: {{HTMLElement("ol")}}, {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("hr")}}, and the obsolete {{HTMLElement("dir")}}.</li> + <li>The <a href="/en-US/docs/Web/HTML/Global_attributes#attr-contextmenu"><code>contextmenu</code></a> <a href="/en-US/docs/Web/HTML/Global_attributes">global attribute</a> can be used on an element to refer to the <code>id</code> of a <code>menu</code> with {{HTMLAttrxRef("type", "menu", 'type="context"')}}.</li> +</ul> + +<div>{{HTMLRef}}</div> |