搜索内容：
时间：2019-08-02
编辑:网站制作公司
746
0
今天我给你介绍两个HTML5元素： <menu> 和 <menuitem>，将部分 交互式元素规范。网络已经发展成为不仅仅是链接文件的东西; 如今，网页的行为越来越像应用。因此，现在是形成标准Web交互功能的适当时机。
杭州企业网站建设这两个元素是开发人员中最少谈论的，可能是由于他们在主流浏览器中缺乏支持。在撰写本文时，Firefox是唯一实现此元素的浏览器。
当我们谈论menu它时，重要的是不要混淆 <nav>。该规范在定义这两个不同元素之间的差异方面做得很好。
这 <nav> 是 HTML导航元素。它是表示网页导航块的元素。它通常包含一组链接，允许用户浏览或跳过页面上的部分或网站的另一页面。
的 <menu>，在另一方面，表示一组菜单命令。这个想法类似于桌面或移动应用程序。桌面应用程序通常使用工具栏菜单和上下文菜单来执行各种任务 例如，在Photoshop中使用“ 模糊”菜单。这将执行使所选图层模糊的任务。
这是这两个要素之间的根本区别; <nav> 应该包含帮助用户浏览网页的链接，而该 <menu> 元素应该帮助用户执行某些任务。
简而言之，该 <menu> 元素用于创建上下文菜单，工具栏和弹出菜单。但是，后两个尚未在任何浏览器中实现，包括在Firefox中。目前，很难猜测（如果？）浏览器将如何实现它们以及它们的外观。在下一次迭代中，工具栏和弹出菜单规范也很有可能会略有变化。
目前，我们将把注意力集中在上下文菜单功能上。
当我们右键单击应用程序时，会出现上下文菜单（或上下文菜单）。显示的选项特定于用户点击的位置，因此是上下文。
可以通过JavaScript或jQuery插件在网页上添加上下文菜单。这种方法的问题在于它通常需要大量标记，而且，关键的是，脚本将删除浏览器本机上下文菜单，如果操作不当，可能会破坏普通用户的期望。
<menu> 与 <menuitem> 元素一起将新菜单项合并为本机上下文菜单的一部分。在下面的示例中，我们将添加<body>一个名为“Hello World”的新上下文菜单项。
1 2 3 4 五 | <body contextmenu="new-context-menu"> <menu id="new-context-menu" type="context"> <menuitem>Hello World</menuitem> </menu> </body> |
上述片段的主要部分是属性- id， type 和 contextmenu -其中指定菜单类型作为context菜单以及应显示新的菜单的范围。
在我们的例子中，当执行右键单击时，新菜单将出现在文档的任何位置，因为我们已使用contextmenu属性将其分配给 body。
或者，也可以通过分配限制页面上的某些部分内的范围contextmenu -属性的元素 <div>， <main>， <section>，和等-在代替 body。
1 2 3 4 五 6 7 8 | <body> <div contextmenu="new-context-menu"> <!-- content --> </div> <menu id="new-context-menu" type="context"> <menuitem>Hello World</menuitem> </menu> </body> |
当我们在浏览器中查看它时（目前仅在Firefox中），您应该看到 menuitem我们声明的内容被添加到列表的最顶部。
子菜单包括具有共同相关或类似动作的一组项目。Photoshop Image Rotation菜单就是一个很好的例子。“ 图像旋转”菜单包含多个子菜单项，以便用户选择所需的旋转度（ 和 ），以及应用它的方向。9001800
使用该 <menu> 元素，添加子菜单既简单又直观。继续<menu> 使用a label 来嵌套另一个以声明菜单名称，如下所示：
1 2 3 4 五 6 7 8 | <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> |
当我们在支持的浏览器中运行它时，我们将找到一个包含四个子菜单的新菜单：
此外，icon 引入了一个名为的新属性 ，可以在菜单旁边添加一个图标。值得注意的是，此属性仅适用于 <menuitem> 元素。指定图标路径 icon，如下所示。
1 2 3 4 五 6 7 8 | <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> |
它就是图标，如下所示。
我们已经构建了一个看起来像上下文菜单的东西，但它还没有这样的功能。用户点击它时会发生一些事情; 单击“ 复制” 应复制文本或链接，而单击“ 新建文件夹”菜单项应创建新文件夹。我们可以使用JavaScript来做到这一点。
注意：在继续之前，我建议你看看Jeremy McPeak关于JavaScript基础知识的课程; 任何学习JavaScript的人都有一个很好的起点。
按照上面的“图像旋转”示例，让我们添加一个可以旋转我们点击的图像的功能。CSS3 Transform和Transition可以为我们在浏览器中执行实际旋转; 这是将图像旋转90度的样式：
1 2 3 | .rotate-90 { transform: rotate(90deg); } |
指定样式规则后，我们需要编写一个函数将其应用于图像：
1 2 3 | function imageRotation(name) { document.getElementById('image').className = name; } |
<menuitem> 通过onclick 属性在相应的 属性中添加此函数， 并使用类名传递参数 rotate-90：
1 2 3 4 五 6 7 8 | <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度并翻转图像的样式规则。并在相应项目中添加每个函数以及参数。在演示页面中查看此示例 。
该 <menu> 元素在Web应用程序或常规网站中都非常有用。可悲的是，支持仍然很差。
杭州企业网站建设希望Safari，Chrome，Opera和Internet Explorer能够很快流行起来，并实现其他菜单类型（ popup 和 toolbar ）。我真的很期待这一元素在来年会如何发展。
3
s后返回登录
3
s后返回登录
