<menu> : Menu element

by

Introduction

The <menu> element in HTML is used to define a list of commands or options that can be accessed by the user. It’s primarily used in conjunction with JavaScript to create custom context menus, toolbars, or other interactive menus within a web application.

Here’s a basic example of how the <menu> element can be used:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        menu{
            background-color: rgb(167, 164, 164);
        }
    </style>
</head>
<body>
    <menu type="toolbar" id="toolbar">
        <li><button onclick="alert('Save')">Save</button></li>
        <br>
        <li><button onclick="alert('Open')">Open</button></li>
        <br>
        <li><button onclick="alert('Print')">Print</button></li>
    </menu>
</body>
</html>

Output :

In this example:

  • The <menu> element contains a list of <li> (list item) elements, each of which contains a <button> element representing a command or option.
  • The type attribute of the <menu> element is set to “toolbar”, indicating that this menu represents a toolbar.
  • Each <button> element has an onclick attribute that triggers a JavaScript function when clicked. In this case, clicking a button will display an alert with the corresponding action (Save, Open, or Print).

It’s important to note that the <menu> element is not widely supported in modern browsers, and its usage is generally discouraged in favor of more flexible and accessible alternatives like using semantic HTML elements combined with CSS and JavaScript to create custom menus and controls.

Leave a Comment