利用HTML 5中的Menu和Menuitem元素快速创建菜单_html/css_WEB-ITnose
译文：HTML 5中Menu和Menuitem的元素介绍
译者：dwqs
今天向你介绍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赋值，例如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/
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
HTML est-il facile à apprendre pour les débutants?
Apr 07, 2025 am 12:11 AM
HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.
Les rôles de HTML, CSS et JavaScript: responsabilités de base
Apr 08, 2025 pm 07:05 PM
HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.
Quel est un exemple d'une balise de départ dans HTML?
Apr 06, 2025 am 12:04 AM
Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.
Comprendre HTML, CSS et JavaScript: un guide pour débutant
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.
Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404?
Apr 04, 2025 pm 11:54 PM
GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...
Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web?
Apr 04, 2025 pm 11:30 PM
L'algorithme adaptatif de la position de l'axe y pour la fonction d'annotation Web Cet article explorera comment implémenter des fonctions d'annotation similaires aux documents de mots, en particulier comment gérer l'intervalle entre les annotations ...
HTML, CSS et JavaScript: outils essentiels pour les développeurs Web
Apr 09, 2025 am 12:12 AM
HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.
Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué?
Apr 05, 2025 am 06:15 AM
Pour obtenir l'effet de la diffusion et de l'élargissement des images environnantes après avoir cliqué sur l'image, de nombreuses conceptions Web doivent obtenir un effet interactif: cliquez sur une certaine image pour faire les environs ...
