今天向你介绍html 5中的两个元素：menu和menuitem，这两个元素是w3c交互元素中的一部分。现在web的演变已经不仅仅局限于文档之间的链接，在apps中，页面的行为越来越多，因此，是时候形成一个web交互的标准了。
menu和menuitem是在开发者中谈论最热门的两个元素，可能是由于主流浏览器对其缺乏足够的支持。在我写这篇文章的时候，firefox已经实现了这个元素。
menu和nav的对比当谈到menu时，难免不和nav元素混淆。区分这两个元素，文档规范是一个不错的工具。
nav元素是html导航元素，代表着web页面的导航块，一般包含一个links集合，允许用户在页面内跳转或者跳转到其它网站页面。
menu是一系列菜单命令的集合，跟桌面或者手机应用有点相似。桌面应用通常使用工具条菜单或者上下文菜单来展现各种任务。nav和menu最根本的不同之处在于：nav元素包含导航链接去帮助用户在web页面之间跳转，而menu应该让用户执行特定的任务。
使用menu元素在一个容器中，menu元素用于创建上下文、工具栏和弹出菜单。然而，后面的两个功能还没有浏览器实现，包括firefox。此刻，很难去猜测浏览会怎么实现他们以及看起来会是什么样子。不过对于toolbar和popup菜单的规范在下一代交互设计中做些改变也是一个不错的机会。
对于现在，我们将集中注意力到上下文。
上下文
当我们右击一个应用时，会出现一个上下文菜单。显示的选项取决于用户在哪里点击。
javascript 选项通过javascript和jquery插件在web页面上添加上下文菜单是可以实现的。问题是这种方法需要额外的标记，并且脚本会删除浏览器本地的菜单，如果处理不当，将会使用户感到失望。
本地解决方案menu和menuitem一起使用，将把新的菜单合并到本地的上下文菜单。例如，给body添加一个叫“hello world”的菜单
<body contextmenu="new-context-menu">
<menu id="new-context-menu" type="context">
<menuitem>hello world</menuitem>
</menu>
</body>
在上述代码片段中，包含的基本属性有id,type和contextmenu—它指定了菜单类型是context，同时也指定了新的菜单项应该被显示的区域。
在示例中，当右击鼠标时，新的菜单项将出现在文档的任何地方，因为我们指定它的作用区域是body。
当然，你可以通过在特定的元素上给contextmenu赋值，例如p,main,section等等，来限制新菜单项的作用区域。
<body>
<p contextmenu="new-context-menu">
<!-- content -->
</p>
<menu id="new-context-menu" type="context">
<menuitem>hello world</menuitem>
</menu>
</body>
当在firefox中查看时，会发现新添加的菜单项被添加到最顶部。
添加子菜单和图标
子菜单由一组相似或相互的菜单项组成。ps中的image rotation就是一个典型的例子。使用menu添加子菜单是非常容易和直观的。查看下面的示例代码：
<menu id="demo-image" type="context">
<menu label="image rotation">
<menuitem>rotate 90</menuitem>
<menuitem>rotate 180</menuitem>
<menuitem>flip horizontally</menuitem>
<menuitem>flip vertically</menuitem>
</menu>
</menu>
在支持menu元素的浏览器中运行时，将看到新菜单中添加的四个子菜单：
图标介绍一个新的属性：icon,使用这个属性可以在菜单的旁边添加图标。值得一提的是，icon属性只能在menuitem元素中使用。示例代码：
<menu id="demo-image" type="context">
<menu label="image rotation">
<menuitem icon="img/arrow-return-090.png">rotate 90</menuitem>
<menuitem icon="img/arrow-return-180.png">rotate 180</menuitem>
<menuitem icon="img/arrow-stop-180.png">flip horizontally</menuitem>
<menuitem icon="img/arrow-stop-270.png">flip vertically</menuitem>
</menu>
</menu>
结果如你所见的：
在菜单中添加功能我们已经构建了一些看起来像菜单的示例，但是是没有任何功能都的。当点击菜单时，用户期待一些事情发生。例如点击copy应该要复制文本或链接，点击new folder应该创建一个新的文件夹。可以用javascript实现这些功能。
注意：在开始之前，我建议你在javascript fundamentals 看一看jeremy mcpeak’s的课程，对于任何想学习javascript的人都是一个不错的开始。
利用上面的“image rotation”为例，让我们添加一个当点击时旋转图像的功能。css 3的transform and transition可以在浏览器中为我们实现这个功能。将图像旋转90度的样式如下：
.rotate-90 {
transform: rotate(90deg);
}
为了使用这个样式，需要写一个函数将它应用到图像。
function imagerotation(name) {
document.getelementbyid('image').classname = name;
}
把这个函数和每一个menuitem的onclick属性关联，并且传递一个参数：rotate-90
<menu id="demo-image" type="context">
<menu label="image rotation">
<menuitem onclick="imagerotation('rotate-90')" icon="img/arrow-return-090.png">rotate 90</menuitem>
<menuitem icon="img/arrow-return-180.png">rotate 180</menuitem>
<menuitem icon="img/arrow-stop-180.png">flip horizontally</menuitem>
<menuitem icon="img/arrow-stop-270.png">flip vertically</menuitem>
</menu>
</menu>
完成这个之后，再创建将图片旋转180度和裁剪图片的样式，将每一个函数添加到独立的menuitem中，记得传参数 。
以上就是使用html中的menu和menuitem元素快速创建菜单详解的详细内容。