介绍HTML5“菜单”和“菜单项”元素

最新推荐文章于 2025-10-14 12:41:12 发布

翻译最新推荐文章于 2025-10-14 12:41:12 发布 · 1.8k 阅读

文章标签：

这篇博客介绍了HTML5的`<menu>`和`<menuitem>`元素，它们是Interactive Elements规范的一部分，用于创建上下文菜单、工具栏和弹出菜单。虽然目前主要浏览器中的支持度有限，但通过JavaScript可以实现一些功能。文章详细讲解了如何使用这些元素创建菜单，添加子菜单和图标，并通过JavaScript添加功能。最后，作者表达了对这些元素未来发展的期待。

今天，我将向您介绍两个HTML5元素： <menu>和<menuitem> ，它们是Interactive Elements规范的一部分。网络已经发展为不仅仅是链接文档。如今，网页的行为越来越像应用程序。因此，现在是形成标准Web交互功能的适当时间。

这两个元素在开发人员中讨论最少，可能是由于它们在主要浏览器中缺乏支持。在撰写本文时，Firefox是唯一实现此元素的浏览器。

菜单与导航元素

当我们谈论menu时，一定不要与<nav>混淆。该规范在定义这两个不同元素之间的差异方面做得很好。

<nav>是HTML导航元素 。它是代表网页导航块的元素。它通常包含一组链接，这些链接使用户可以导航或跳至该页面或网站的另一页面上的部分。

另一方面， <menu>代表一组菜单命令。这个想法类似于台式机或移动应用程序。桌面应用程序通常使用工具栏菜单和上下文菜单来执行各种任务。以Photoshop中的“ 模糊”菜单为例。这将执行使所选图层模糊的任务。

这是这两个元素之间的根本区别。 <nav>应该包含帮助用户浏览网页的链接，而<menu>元素应该帮助用户执行某些任务。

使用菜单元素

简而言之， <menu>元素旨在创建上下文菜单，工具栏和弹出菜单。但是，其中的后两者尚未在包括Firefox在内的任何浏览器中实现。目前，很难猜测浏览器将如何实现它们以及它们的外观。在下一次迭代中，工具栏和弹出菜单规范也很有可能会稍有变化。

现在，我们将注意力集中在上下文菜单功能上。

上下文菜单

右键单击应用程序时，将显示一个上下文菜单（或上下文菜单）。显示的选项特定于用户单击的位置，因此特定于上下文 。

JavaScript选项

可以通过JavaScript或jQuery插件在网页上添加上下文菜单。这种方法的问题在于，它通常需要大量标记，并且，至关重要的是，脚本将删除浏览器的本机上下文菜单，如果操作不当，可能会打乱普通用户的期望。

本机解决方案

<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菜单以及应显示新菜单的范围。

在我们的案例中，执行右键单击时，新菜单将出现在文档中的任何位置，因为我们已使用contextmenu属性将其分配给body 。

另外，您可以通过将contextmenu属性分配给元素<div> ， <main> ， <section>等（而不是body来限制页面上特定部分的范围。

<body>
    <div contextmenu="new-context-menu">
    <!-- content -->
    </div>
    <menu id="new-context-menu" type="context">
        <menuitem>Hello World</menuitem>
    </menu>
</body>

当我们在浏览器中查看它时（目前仅在Firefox中），您应该看到我们声明的menuitem被添加到列表的最顶部。

添加子菜单和图标

子菜单包含一组具有相互关联或相似动作的项目。 Photoshop的“ 图像旋转”菜单就是一个很好的例子。 图像旋转菜单包含几个子菜单项，可让用户选择所需的旋转度（ 90 ⁰和180 ⁰ ）以及应用的方向。

使用<menu>元素，添加子菜单既简单又直观。继续并嵌套另一个<menu>和label以声明菜单名称，如下所示：

<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 ，像这样。

<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度的样式：

.rotate-90 {
    transform: rotate(90deg);
}

使用指定的样式规则，我们需要编写一个函数将其应用于图像：

function imageRotation(name) {
    document.getElementById('image').className = name;
}

通过onclick属性将此函数添加到相应的<menuitem> ，并通过类名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度并翻转图像。并将每个函数与参数一起添加到相应的项中。在演示页面中查看此示例的实际操作。

结论

<menu>元素在Web应用程序或常规网站中都非常有用。可悲的是，支持仍然很差。

希望Safari，Chrome，Opera和Internet Explorer很快会流行起来，并且还可以实现其他菜单类型（ popup菜单和toolbar ）。我非常期待这一元素在来年会如何发展。

翻译自: https://webdesign.tutsplus.com/tutorials/introducing-the-html5-menu-and-menuitem-elements--cms-22269