direktori cari
Attributes accesskey (attribute) class (attribute) contenteditable (attribute) contextmenu (attribute) data-* (attribute) dir (attribute) draggable (attribute) dropzone (attribute) Global attributes hidden (attribute) id (attribute) itemid (attribute) itemprop (attribute) itemref (attribute) itemscope (attribute) itemtype (attribute) lang (attribute) slot (attribute) spellcheck (attribute) style (attribute) tabindex (attribute) title (attribute) translate (attribute) Elements a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 head header hr html i iframe img input input type="button" input type="checkbox" input type="color" input type="date" input type="datetime"-local input type="email" input type="file" input type="hidden" input type="image" input type="month" input type="number" input type="password" input type="radio" input type="range" input type="reset" input type="search" input type="submit" input type="tel" input type="text" input type="time" input type="url" input type="week" ins kbd label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt rtc ruby s samp script section select slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr Miscellaneous Attributes Block-level elements CORS enabled image CORS settings attributes Element Inline elements Kinds of HTML content Link types Microdata Optimizing your pages for speculative parsing Preloading content Reference Supported media formats Using the application cache Obsolete acronym applet basefont big blink center command content dir element font frame frameset hgroup image input type="datetime" isindex keygen listing marquee nextid noframes plaintext strike tt xmp
watak

这是一项实验技术

由于该技术的规格不稳定,请查看各种浏览器的兼容性表格以供使用。另外请注意,随着规范的变化,实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

HTML<menu> 元素表示的一组命令,一个用户可以执行或激活命令。这包括可能出现在屏幕顶部的列表菜单,以及上下文菜单,例如点击后可能出现在按钮下方的菜单。

内容类别

Flow conten 。另外,在列表菜单状态下的 palpable content 。(列表菜单是默认状态,除非上下文菜单状态中的父元素是<menu>。)

允许的内容

如果元素处于列表菜单状态或者零次或多次出现<li>,<script>和<template>:flow content 。如果元素处于上下文菜单状态:按照任意顺序,<menu>(仅限上下文菜单状态),<menuitem>,<hr>,<script>和<template>出现零次或多次。

标记遗漏

没有,起始和结束标签都是强制性的。

允许父级

任何接受 flow content 的元素。

允许ARIA角色

没有

DOM界面

HTMLMenuElement

属性

这个元素包含全局属性。

label显示给用户的菜单名称。在嵌套菜单中使用,提供一个标签,通过它可以访问子菜单。只能在父元素为上下文菜单 状态中<menu>时指定。

type该属性表示正在声明的菜单种类,可以是两个值中的一个。

  • context:表示弹出菜单状态,表示通过另一个元素激活的一组命令。这可能是由一个元素的menu属性引用的按钮菜单<button>,或者是具有属性的元素的上下文菜单contextmenu。如果该属性缺失并且父元素也是元素,则此值是缺省值<menu>

  • toolbar:表示工具栏状态,表示由用于用户交互的一系列命令组成的工具栏。这可能是无序的<li>元素列表的形式,或者如果元素没有<li>元素子元素,则流描述可用命令的内容。如果该属性缺失,该值是默认值。

使用说明

<menu><ul>元素都代表项目的无序列表。主要区别在于<ul>主要包含用于显示的项目,同时<menu>用于交互项目,以便执行。

HTML菜单可用于创建上下文菜单(通常通过右键单击另一个元素来激活)或工具栏。

上下文菜单(右键菜单) 包含一个<menu>元素,该元素包含<menuitem>菜单中每个可选选项的<menu>元素,菜单内子菜单的<hr>元素以及将菜单内容分解为多个分区的分隔线元素。然后使用关联元素的contextmenu属性将上下文菜单附加到它们被激活的元素,或者对于附加到<button>元素的按钮激活菜单,将menu属性附加到上下文菜单。

工具栏菜单 由一个<menu>元素组成,其内容以两种方式之一描述:或者作为由<li>元素表示的项目的无序列表(每个表示用户可以使用的命令或选项),或者(如果没有<li>元素),流量内容描述可用的命令和选项。

该元素在HTML4中被弃用,但是在HTML5.1和HTML生活标准中被重新引入。本文档介绍了当前的Firefox实现。根据HTML5.1,类型“列表”可能会更改为“工具栏”。

例子

上下文菜单

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>

CSS内容

div {
  width: 300px;
  height: 80px;
  background-color: lightgreen;}

结果

菜单按钮

菜单按钮尚未在任何已知的浏览器中实现。

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>

结果

工具栏菜单

工具栏菜单尚未在任何已知的浏览器中实现。

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>

结果

规范

Specification

Status

Comment

WHATWG HTML Living StandardThe definition of '<menu>' in that specification.

Living Standard


HTML5.1The definition of '<menu>' in that specification.

Recommendation


浏览器兼容性

Feature

Chrome

Firefox (Gecko)

Edge

Internet Explorer

Opera

Safari

type="context"

(Yes)1

8 (8)2

(Yes)

No support

(Yes)3

No support

type="toolbar"

No support

No support

No support

No support

No support

No support

Menu buttons

No support

No support

No support

No support

No support

No support

<hr> to create separators

?

51 (51)

No support

No support

?

No support

Feature

Android

Edge

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

type="context"

No support

(Yes)

(Yes)4

No support

No support

No support

type="toolbar"

No support

No support

No support

No support

No support

No support

Menu buttons

No support

No support

No support

No support

No support

No support

<hr> to create separators

No support

No support

51 (51)

No support

No support

No support

Artikel sebelumnya: Artikel seterusnya: