Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Add a Menu List in HTML
If we want to create a menu list in HTML, we have to use <menu> tag, it is used to defines a list of commands that can be used by the users for creating listing form control, context menus, toolbar, and commands.
At present this <menu> tag was removed from HTML and again reintroduced in HTML5. On majority of platforms, this tag is not supported on the majority of platforms.
Syntax
The usage of <menu> tag in HTML is shown below −
<menu> -- --- --- </menu>
The attributes present in menu tag are shown below
<menu type="list|context|toolbar">
list consists of default value, which is used to define a list of menus that can perform some actions whenever it is interacting with user.
context is used to define the context menu which can perform an action before interacting with the user.
toolbar is used to define a toolbar menu which allows commands, and also it allows the user to interact with the commands immediately.
Example
Following is the example to add a menu list in HTML −
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:blue;"> TutorialsPoint WebSite </h1>
<h2>HTML <menu> type attribute </h2>
<div style="background:yellow; border:2px solid black; padding: 10px;" contextmenu="tutorial">
<p>Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects. <menu type="context" id="menuID">
<menu label="Share on...">
<menuitem label="HTML" onclick="https://www.tutorialspoint.com/questions/category/HTML"></menuitem>
<menuitem label="Operating System" onclick="https://www.tutorialspoint.com/questions/category/operating-system"></menuitem>
</menu>
<menuitem label="Email This Page" onclick="window.location='mailto:?body='+ window.location.href;"></menuitem>
</div>
<p>Tutorials Point is a leading Ed Tech company </p>
<hr>
<p>Right click on yellow color div and see the menuitem
</center>
</body>
</html>
The contents of "menu" tags are shown below −
<menuitem>
<li>
<script>
<hr>
The HTML <menu> tag also supports the following additional attributes −
Attribute |
Value & Description |
|---|---|
label |
text Specifies a visible label. |
type |
popup Specifies the type of menu to be displayed. |
type |
context Specifies the type of menu to be displayed. |
type |
toolbar Specifies the type of menu to be displayed. |
Example
In the following example we are trying to add a menu list in HTML using the <menu> tag −
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Menu Tag example</title>
</head>
<body>
<menu>
<li>HTML Lists.</li>
<li>HTML Unordered Lists.</li>
<li>HTML Ordered Lists.</li>
<li>HTML Definition Lists.</li>
</menu>
</body>
</html>
Example
Let us see another example −
<!DOCTYPE>
<html>
<head>
<title>HTML is a markup language</title>
</head>
<body>
<h1>HTML -- menu tag.</h1>
<p>Creates a menu list................</p>
<menu>
<li>Home</li>
<li>Registration</li>
<li>About Us</li>
<li>Contact</li>
<li>Feedback</li>
</menu>
</body>
</html>
1K+ Views
