The `<menu>` tag is an HTML element used to create a list of commands or options that a user can choose from. It is often used in conjunction with the `<menuitem>` element to create a complete menu system. In this tutorial, we will explore how to use the `<menu>` tag to create menus on your web pages.
Syntax
The `<menu>` tag has the following syntax:
<menu>
<menuitem label=”Command 1″ onclick=”function1()”></menuitem>
<menuitem label=”Command 2″ onclick=”function2()”></menuitem>
<menuitem label=”Command 3″ onclick=”function3()”></menuitem>
</menu>
The `<menu>` tag contains one or more `<menuitem>` tags. Each `<menuitem>` tag represents a command or option in the menu. The `label` attribute is used to specify the text that will be displayed for the command or option. The `onclick` attribute is used to specify the JavaScript function that will be executed when the command or option is selected.
Example
Let’s create a simple menu that contains two commands:
<!DOCTYPE html>
<html>
<head>
<title>Menu Example</title>
</head>
<body>
<menu>
<menuitem label=”Save” onclick=”saveDocument()”></menuitem>
<menuitem label=”Print” onclick=”printDocument()”></menuitem>
</menu>
<script>
function saveDocument() {
alert(“Document saved!”);
}
function printDocument() {
alert(“Document printed!”);
}
</script>
</body>
</html>
In this example, we have created a menu with two commands: “Save” and “Print”. When the user selects a command, a JavaScript function is executed to perform the appropriate action. In this case, an alert box is displayed with a message indicating that the document has been saved or printed.
## Styling
The appearance of the menu created with the `<menu>` tag can be styled using CSS. Here is an example of how to change the background color of the menu:
menu {
background-color: #f2f2f2;
border: 1px solid #ccc;
padding: 10px;
}
menuitem {
display: block;
padding: 5px;
cursor: pointer;
}
menuitem:hover {
background-color: #ccc;
}
In this example, we have set the background color of the menu to a light gray and added a border and padding to create some space around the menu items. We have also set the display of the `<menuitem>` tags to “block” and added some padding to create some space between the menu items. Finally, we have added a hover effect to change the background color of the menu item when the user hovers over it.
Accessibility
The `<menu>` tag is an accessible way to create menus on your web pages. It is supported by screen readers and other assistive technologies, making it easier for users with disabilities to navigate your site. However, it is important to ensure that your menus are properly labeled and that the keyboard focus is managed correctly to ensure that all users can easily navigate your site.
Conclusion
The `<menu>` tag is a useful HTML element for creating menus on your web pages. It is easy to use and can be styled using CSS to match the design of your site. When used correctly, it can also improve the accessibility of your site by making it easier for users with disabilities to navigate your menus.
