HTML | DOM Menu Object

Difficulty Level : Basic
Last Updated : 22 Apr, 2019

The DOM Menu Object is used to represent an HTML <menu> element. This tag defines a list of commands. It is used for context menus, toolbars and for listing form controls and commands.

Syntax:

Accessing Menu Object

var y = document.getElementById("myMenu");

Creating Menu Object
```
var y = document.createElement("MENU");
```

Properties:

label: It sets or returns the value of label attribute of the menu.
type: It sets or returns the value of type attribute of the menu.

Examples-1: Accessing Menu Object.

<!DOCTYPE html> 
<html> 
  
<body> 
  
    <div style="background:green; 
                padding: 10px;" 
         contextmenu="MENU"> 
        <p>Right-click inside the box  
          to see the context menu!!!</p> 
  
        <menu type="context" 
              id="MENU"> 
            <menuitem label="Refresh" 
                      onclick="window.location.reload();"
                      icon="ico_reload.png"> 
          </menuitem> 
  
            <menuitem label="Email This Page" 
                      onclick="window.location= 
                         'mailto:?body='
                               +window.location.href;"> 
          </menuitem> 
        </menu> 
  
    </div> 
    <script> 
        function Geeks() { 
            var y = document.getElementById("MENU"); 
  
        } 
    </script> 
  
    <p>This example can work only on Firefox!</p> 
  
</body> 
  
</html> 

Output:

Example-2: Creating Menu Object.

<!DOCTYPE html> 
<html> 
  
<body> 
  
    <div style="background:pink; 
                padding: 10px;" 
         contextmenu="MENU"> 
        <p>Right-click inside the box  
          to see the context menu!!!</p> 
  
        <menu type="context"
              id="MENU"> 
            <menuitem label="Refresh"
                      onclick="window.location.reload();"
                      icon="ico_reload.png"> 
          </menuitem> 
  
            <menuitem label="Email This Page"
                      onclick="window.location= 
                               'mailto:?body='
                               +window.location.href;"> 
          </menuitem> 
        </menu> 
  
    </div> 
    <script> 
        function Geeks() { 
            
           //creating menu 
            var y =  
                document.createElement("MENU");  
  
            document.getElementById("MENU"); 
        } 
    </script> 
  
    <p>This example can work only on Firefox!</p> 
  
</body> 
  
</html> 

Output:

Browsers Supported:

Mozilla Firefox-8.0

My Personal Notes

Related Articles