目录搜索
Attributesaccesskey (attribute)class (attribute)contenteditable (attribute)contextmenu (attribute)data-* (attribute)dir (attribute)draggable (attribute)dropzone (attribute)Global attributeshidden (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)Elementsaabbraddressareaarticleasideaudiobbasebdibdoblockquotebodybrbuttoncanvascaptioncitecodecolcolgroupdatadatalistdddeldetailsdfndialogdivdldtemembedfieldsetfigcaptionfigurefooterformh1headheaderhrhtmliiframeimginputinput type="button"input type="checkbox"input type="color"input type="date"input type="datetime"-localinput 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"inskbdlabellegendlilinkmainmapmarkmenumenuitemmetameternavnoscriptobjectoloptgroupoptionoutputpparampicturepreprogressqrprtrtcrubyssampscriptsectionselectslotsmallsourcespanstrongstylesubsummarysuptabletbodytdtemplatetextareatfootththeadtimetitletrtrackuulvarvideowbrMiscellaneousAttributesBlock-level elementsCORS enabled imageCORS settings attributesElementInline elementsKinds of HTML contentLink typesMicrodataOptimizing your pages for speculative parsingPreloading contentReferenceSupported media formatsUsing the application cacheObsoleteacronymappletbasefontbigblinkcentercommandcontentdirelementfontframeframesethgroupimageinput type="datetime"isindexkeygenlistingmarqueenextidnoframesplaintextstrikettxmp
文字

这是一项实验技术

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

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

上一篇:下一篇: