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