<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:
Drop-Down Menu
(see <menu> tag demo above)
<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="<menu>">
<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>