<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>