 |
| MENU-TAG-IN-HTML |
HTML <menu> Tag
1. Introduction of <menu> tag
2. Syntax of <menu> tag
2. Syntax of <menu> tag
3. Attributes of <menu> tag
4. Example of <menu> tag
4. Example of <menu> tag
Introduction to HTML <menu> Tag
HTML <menu> tag was included in the old versions but later it was excluded in HTML version 4.0.1. Now, this tag is included in HTML5 after redefining. <menu> tag is used to define the list of commands.
For example, you add an image to the web page. If you want to display your menu of the defined commands, and not display a default menu when someone right clicks on this image. For this, you will have to use the HTML <menu> tag.
Every command in the list of commands performs a specific task. For example, when you right-click on the desktop in the Windows operating system, you can see a list of some commands that perform different tasks.
Similarly, you can also create a list of commands for HTML elements, which will show the list of commands when the user right clicks on the specific text or image. Context menus, popup menus, toolbars and form controls can be created by <menu> tag.
In whatever element you want to apply the menu on the HTML element, you define the context menus attribute and pass it as the id value of the <menu> tag.
HTML <menuitem> Tag
The <menu> tag works as a container for the list of commands. Every command inside it is defined by <menuitem>. The <menuitem> tag has two main attributes label and icon.
In this, the display name of the command is defined by the label attribute and icon is defined by icon attribute. Defining the icon of the command is not mandatory. The general syntax of this tag is given below.
<menuitem label = "command-name" icon = "icon-image-url" event-attribute = "action"> </ menuitem>
What actions will be taken when clicking on a command, you can define it by HTML event attributes. For example, you can define from onclick event attribute what action will be taken when clicking on the command.
Syntax of HTML <menu> Tag
The general syntax for the HTML <menu> tag is given below.
<menu label = "" type = "" id = "">
<menuitem attributes ...>
</menuitem>
</menu>
As you can see above in syntax, it is defined <menuitem> tag inside <menu> tag. It can also be called the subtag of the <menu> tag.
Attributes of HTML <menu> Tag
With the <menu> tag, the available attributes are described as below.
label
With this attribute, you can define a display name of the menu. It is not mandatory to define it.
Type
By this attribute, you can define what type of menu you want to show. This attribute can have three possible values those are given as below.
list - When you want to create a list of commands.
toolbar - When you want to create a toolbar
context - When you want to create a context menu
<menu> tag also supports all global and event attributes of HTML.
Example of <menu> tag in HTML
An image is added to the above example. The context menu has been applied on the user-defined menu (myMenu) on this image. In this menu, the refresh command is given which will reload the image when clicked. This example produces output as below.
 |
| EXAMPLE-HTML-MENU-TAG |
This tag works only in the Mozilla Firefox web browser.
It's an awesome piece of writing for all the internet users; they will take benefit from it I am sure.
ReplyDeleteBy the way, I heard about this awsome affiliate program for Instagram influencers.
Better apply soon before all the spots are filled up. Here is
the link: http://chilp.it/9c33f79