利用HTML 5中的Menu和Menuitem元素快速创建菜单_html/css

首页

web前端

html教程

利用HTML 5中的Menu和Menuitem元素快速创建菜单_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:53 AM

译文：HTML 5中Menu和Menuitem的元素介绍

译者：dwqs

今天向你介绍HTML 5中的两个元素：Menu和Menuitem，这两个元素是W3C交互元素中的一部分。现在Web的演变已经不仅仅局限于文档之间的链接，在APPs中，页面的行为越来越多，因此，是时候形成一个Web交互的标准了。

Menu和Menuitem是在开发者中谈论最热门的两个元素，可能是由于主流浏览器对其缺乏足够的支持。在我写这篇文章的时候，FireFox已经实现了这个元素。

当谈到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赋值，例如div,main,section等等，来限制新菜单项的作用区域。

<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实现这些功能。

注意：在开始之前，我建议你在 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中，记得传参数。查看效果：in the demo page.

查看更多关于Menu元素的信息：Interactive Element: The Menu Element

查看我的示例：http://jsfiddle.net/Web_Code/15pc5zfv/1/embedded/result/

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML标签和HTML属性有什么区别？May 14, 2025 am 12:01 AM

HTMLtagsdefinethestructureofawebpage,whileattributesaddfunctionalityanddetails.1)Tagslike,,andoutlinethecontent'splacement.2)Attributessuchassrc,class,andstyleenhancetagsbyspecifyingimagesources,styling,andmore,improvingfunctionalityandappearance.

HTML的未来：进化和趋势May 13, 2025 am 12:01 AM

HTML的未来将朝着更加语义化、功能化和模块化的方向发展。1)语义化将使标签更明确地描述内容，提升SEO和无障碍访问。2)功能化将引入新元素和属性，满足用户需求。3)模块化将支持组件化开发，提高代码复用性。

为什么HTML属性对Web开发很重要？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外观和功能

Alt属性的目的是什么？为什么重要？May 11, 2025 am 12:01 AM

alt属性是HTML中标签的重要部分，用于提供图片的替代文本。1.当图片无法加载时，alt属性中的文本会显示，提升用户体验。2.屏幕阅读器使用alt属性帮助视障用户理解图片内容。3.搜索引擎索引alt属性中的文本，提高网页的SEO排名。

HTML，CSS和JavaScript：示例和实际应用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在网页开发中的作用分别是：1.HTML用于构建网页结构；2.CSS用于美化网页外观；3.JavaScript用于实现动态交互。通过标签、样式和脚本，这三者共同构筑了现代网页的核心功能。

如何在标签上设置lang属性？为什么这很重要？May 08, 2025 am 12:03 AM

设置标签的lang属性是优化网页可访问性和SEO的关键步骤。1)在标签中设置lang属性，如。2)在多语言内容中，为不同语言部分设置lang属性，如。3)使用符合ISO639-1标准的语言代码，如"en"、"fr"、"zh"等。正确设置lang属性可以提高网页的可访问性和搜索引擎排名。

HTML属性的目的是什么？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外观和互动，使网站互动，响应式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，类，类型，类型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中创建列表？May 06, 2025 am 12:01 AM

toCreateAlistinHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulleTedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，customeizableWithTheTtheTthetTheTeTeptTributeFordTributeForderForderForderFerentNumberingSnumberingStyls。

See all articles