HTML <menu> Tag for Drop-Down Menus

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <menu> Tag in HTML 5

The <menu> tag provides an easy way to create menus on a web page. It is one of the tags for interactive content in HTML. As in previous versions of HTML, a web site's menu system can be coded in XSLT templates coded in style sheets referenced from multiple web pages in order to create a cacheable site-wide menu.

This is an actual working example of the drop-down menu example code below. It shows how to implement a drop-down menu without JavaScript. It only requires CSS, which works even if JavaScript is disabled for some reason.

<menu> Tag Syntax

Rules for coding HTML `menu` elements

Child Elements of the <menu> tag

<li> tag(s): The <menu> tag can contain a list of commands, similar to an unordered list.
<button> tag(s)
<command> tag(s)
<select> tag(s)

<menu> Tag Attributes

Attributes of the <menu> tag

global attributes	In addition to the personal attributes of the <menu> tag below, any of the common HTML attributes can also be coded.
`label`	The `label` attribute
`type="context"` `type="toolbar"`	The `type` attribute is optional and indicates the type of menu. When omitted, the menu is simply a list of commands. `type="context"` is used to create a pop-up context menu. The user can typically display the context menu by clicking the second mouse button. `type="toolbar"` is used to create a tool bar.

<menu> Tag Examples

Examples of the `menu` tag in HTML 5

Menu with Radio Buttons

<menu>
   <li><input type="radio" name="drinks"/>Coffee</li>
   <li>>input type="radio" name="drinks"/>Tea</li>
</menu>

Menu with Check Boxes

<menu>
   <li><input id="cream" type="checkbox" name="withCream"/>Cream</li>
   <li><input id="sugar" type="checkbox" name="withSugar"/>Sugar</li>
</menu>

Select your preferred beverage and any additives:

Coffee

Tea

Cream

Sugar

<nav style="height: 1.5em">
<style scoped="scoped">
menu[type="toolbar"], menu[type="toolbar"] * {
   margin: 0;
   padding: 0:
}
menu[type="toolbar"] > li {
   display: inline-block;
   vertical-align: top;
   border: 2px solid #000000;
}
menu[type="toolbar"] > li > menu {
   float: left;
   width: 8em;
   background-color: #cccccc;
   text-align: center;
}
menu[type="toolbar"] > li > menu:before {
   content: attr(label);
   color: #333333;
}
menu[type="toolbar"] > li > menu > li {
   position: relative;
   z-index: 1;
   background-color: #cccccc;
   text-align: left;
   display: none;
   -moz-transition: background-color 0.3s;
   -webkit-transition: background-color 0.3s
}
menu[type="toolbar"] > li > menu:hover > li {
   display: block;
}
menu[type="toolbar"] > li > menu:hover > li:first-child {
   border-top: 2px solid #000000;
}
menu[type="toolbar"] > li > menu > li > a {
   padding: 0 1em;
   color: #333333;
   text-decoration: none;
}
menu[type="toolbar"] > li > menu:hover,
menu[type="toolbar"] > li > menu:hover:before,
menu[type="toolbar"] > li > menu > li:hover,
menu[type="toolbar"] > li > menu > li:hover > a
{
   background-color: #999999;
   color: #000000;
}
</style>
<menu type="toolbar">
   <li>
      <menu label="Sections">
         <li><a href="../../tutorials/">Tutorials</a></li>
         <li><a href="../../examples/">Examples</a></li>
      </menu>
   </li>
   <li>
      <menu label="&lt;menu&gt;">
         <li><a href="#description">Description</a></li>
         <li><a href="#syntax">Syntax</a></li>
         <li><a href="#attributes">Attributes</a></li>
         <li><a href="#examples">Examples</a></li>
         <li><a href="#whats-new">Changes</a></li>
      </menu>
   </li>
</menu>
</nav>

Changes in HTML 5 - <menu> Tag

What's new in HTML 5

The <menu> tag has been redefined in HTML version 5. In addition, the label, type and global contextmenu attributes have been added.

Differences between HTML 5 and earlier versions of HTML

The <menu> tag was deprecated in HTML version 4 and has now been redefined in HTML 5. Make sure that you are using the HTML 5 definition of the <menu> tag, not a pre-HTML v4 definition.

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the menu element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5

HTML <menu> Tag for Drop-Down Menus

Wednesday, August 13, 2014