Home > Developer > Web Develop
Original: Introducing the HTML5 "menu" and "Menuitem" Elements
Elements of menu and MenuItem in HTML 5
Translator: Dwqs
Today I'll introduce you to the two elements in HTML 5: Menu and MenuItem, and these two elements are part of the interactive element. The evolution of the web is now more than just a link between documents, and in apps the page behaves more and more, so it's time to form a standard for web interaction.
Menu and MenuItem are talking about the hottest two elements in the developer, probably because the mainstream browser lacks enough support. When I write this article, Firefox has implemented this element.
Comparison of menu and NavWhen it comes to menu, it is inevitable that the nav element is not confused. The document specification is a good tool to differentiate between these two elements.
The nav element is an HTML navigation element that represents the navigation block of a Web page and typically contains a links collection that allows users to jump to or jump to other Web pages within a page.
Menus are a collection of menu commands that are similar to desktop or mobile apps. Desktop apps typically use a toolbar menu or context menu to display a variety of tasks. The fundamental difference between NAV and menu is that the Nav element contains navigation links to help users jump between Web pages, and menu should let users perform specific tasks.
Using the menu Element
In a container, the menu element is used to create contexts, toolbars, and pop-up menus. However, the following two features are not yet browser-enabled, including Firefox. At the moment, it's hard to guess how the tour will come true and what it looks like. But the specification for toolbar and popup menus is a good opportunity to make some changes in next-generation interaction design.
For now, we will focus on the context.
Context
When we right-click an app, a context menu appears. The options displayed depend on where the user clicked.
JavaScript Options
It is possible to add context menus on a Web page via JavaScript and jquery plugins. The problem is that this method requires additional markup, and the script removes the browser's local menu, which, if improperly handled, will disappoint the user.
Local Solutions
Menu and MenuItem are used together, the new menu is merged into the local context menu. For example, add a menu called "Hello World" to the body
<Body contextmenu = " New-context-menu " > < menu id = " New-context-menu " type =" context " Span style= "COLOR: #0000ff" >> < MenuItem > Hello world</ menuitem > </ menu > </ body >
In the code snippet above, the basic properties included are Id,type and contextmenu-it specifies that the menu type is context, and also specifies the area where the new menu item should be displayed.
In the example, when you right-click the mouse, the new menu item will appear anywhere in the document, because we specify that its action area is body.
Of course, you can limit the action area of a new menu item by assigning a value to ContextMenu on a particular element, such as div,main,section, and so on.
<Body> <Div ContextMenu= "New-context-menu"> <!--content -- </Div> <Menu ID= "New-context-menu" type= "Context"> <MenuItem>Hello World</MenuItem> </Menu></Body>
When viewed in Firefox, the newly added menu item is added to the top of the list.
Add submenus and icons
A submenu consists of a set of similar or reciprocal menu items. The image rotation in PS is a typical example. Using the menu to add submenus is very easy and intuitive. Look at 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 will see four submenus added to the new menu:
Icon
Describes a new property: Icon, which allows you to add icons next to the menu by using this property. It is worth mentioning that the Icon property can only be used in the MenuItem element. Example 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 you can see:
Adding features to the menu
We've built some examples that look like menus, but they don't have any functionality at all. When the menu is clicked, the user expects something to happen. For example, click Copy to copy the text or link, and click New Folder to create one. You can implement these features with JavaScript. Note: Before you start, I recommend that you take a look at the Jeremy McPeak's course in JavaScript Fundamentals, which is a good start for anyone who wants to learn JavaScript. using the "image Rotation" example above, let's add a feature that rotates the image when clicked. The transform and transition of CSS 3 can be implemented for us in the browser. The style for rotating the image 90 degrees is as follows:. 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 each of the MenuItem's onclick properties, 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>
Once this is done, create a style that rotates the picture 180 degrees and crop the picture, adding each function to a separate MenuItem, remembering to pass the argument. View Effects: In the demo page.
See more information about menu elements: Interactive element:the menu Element
View my example: http://jsfiddle.net/Web_Code/15pc5zfv/1/embedded/result/
Quickly create menus using the menu and MenuItem elements in HTML 5
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
