Home > Developer > JavaScript
Use the Menu and Menuitem elements in HTML 5 to quickly create a Menu, menumenuitem
Original article: Introducing the HTML5 "Menu" and "Menuitem" Elements
Introduction to Menu and Menuitem elements in HTML 5
Translator: dwqs
Today, we will introduce two elements in HTML 5: Menu and Menuitem, which are part of the W3C interaction element. Now the Web evolution is not limited to links between documents. In APPs, there are more and more page behaviors. Therefore, it is time to form a standard for Web interaction.
Menu and Menuitem are the two most popular elements for developers, probably because mainstream browsers lack adequate support for them. When I wrote this article, FireFox has implemented this element.
Comparison between Menu and NavWhen it comes to Menu, it is inevitable not to be confused with the Nav element. The document specification is a good tool to distinguish between the two elements.
The Nav element is an HTML navigation element that represents the web page navigation block. It generally contains a links set that allows users to jump to or jump to other website pages.
Menu is a collection of Menu commands, similar to desktop or mobile apps. Desktop applications usually use toolbar menus or context menus to display various tasks. The most fundamental difference between Nav and Menu is that the Nav element contains navigation links to help users jump between Web pages, while Menu should allow users to execute specific tasks.
Use Menu Element
In a container, the Menu element is used to create the context, toolbar, and pop-up Menu. However, the following two features have not yet been implemented by a browser, including FireFox. At this moment, it is difficult to guess how the browser will implement them and what it looks like. However, it is also a good opportunity to make some changes to the toolbar and popup menu specifications in the next-generation interaction design.
For now, we will focus on context.
Context
When we right-click an application, a context menu will appear. The displayed options depend on where the user clicks.
JavaScript options
You can use the JavaScript and JQuery plug-ins to add context menus on the web page. The problem is that this method requires additional markup and the script will delete the local menu of the browser. If it is not handled properly, the user will be disappointed.
Local Solution
The Menu and Menuitem are used together to merge the new Menu into the local context Menu. For example, add a menu named "Hello World" to the body.
<body contextmenu="new-context-menu"><menu id="new-context-menu" type="context"> <menuitem>Hello World</menuitem></menu></body>
In the preceding code snippet, the basic attributes include id, type, and contextmenu, which specify the context menu type and the area where the new menu item should be displayed.
In this example, When you right-click a document, the new menu item appears anywhere in the document, because we specify that it is the body.
Of course, you can assign values to the contextmenu on a specific element, such as div, main, and section, to restrict the effective regions of a single dish.
<body> <div contextmenu="new-context-menu"> <!-- content --> </div> <menu id="new-context-menu" type="context"> <menuitem>Hello World</menuitem> </menu></body>
When you view it in FireFox, you will find that the newly added menu item is added to the top.
Add sub-menus and icons
A sub-menu consists of a group of similar or mutual menu items. Image Rotation in PS is a typical example. Using Menu to add sub-menus is very easy and intuitive. View the following sample code:
<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>
When running in a browser that supports Menu elements, you can see the four sub-menus added to the new Menu:
Icon
This section describes a new property: icon, which can be used to add an icon next to a menu. It is worth mentioning that the icon attribute can only be used in the menuitem element. Sample Code:
<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>
The result is as shown in the following figure:
Add a function to the menu
We have built some examples that look like menus, but they do not have any functions. When you click the menu, you will expect something to happen. For example, if you click Copy, you should Copy the text or link and click New Folder to create a New Folder. You can use JavaScript to implement these functions. Note: Before you start, I suggest you take a look at Jeremy McPeak's courses in JavaScript Fundamentals, which is a good start for anyone who wants to learn JavaScript. Taking Image Rotation as an example, let's add the Image Rotation function when you click it. The Transform and Transition of CSS 3 can be implemented for us in the browser. Rotate the image 90 degrees in the following format:.rotate-90 { transform: rotate(90deg);}
To use this style, you need to write a function to apply it to the image.
function imageRotation(name) { document.getElementById('image').className = name;}
Associate this function with the onclick attribute of each menuitem and pass a parameter: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>
After that, create a style that rotates the image for 180 degrees and crops the image. Add each function to a separate menuitem. Remember to pass the parameter. View results: in the demo page.
View
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
