HTML 5中Menu和Menuitem元素创建菜单的例子
Menu和Nav的对比
当谈到Menu时,难免不和Nav元素混淆。区分这两个元素,文档规范是一个不错的工具。
使用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>
<body> <div contextmenu="new-context-menu"> <!-- content --> </div> <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实现这些功能。
.rotate-90 { transform: rotate(90deg); }
function imageRotation(name) { document.getElementById('image').className = name; }
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>