HTML and CSS Reference
In-Depth Information
<li>
Item 3
</li>
<li>
Item 4
</li>
</menu>
Under HTML5 the
menu
element has been returned to its original purpose. A new
attribute,
type
, is introduced that takes a value of
toolbar
,
context
, or
list
(the default).
This example sets up a simple File menu for a Web application:
<menu type="toolbar" id="fileMenu" label="File">
<li><a href="javascript:newItem();">
New
</a></li>
<li><a href="javascript:openItem();">
Open
</a></li>
<li><a href="javascript:closeItem();">
Close
</a></li>
<hr>
<li><a href="javascript:saveItem();">
Save
</a></li>
<li><a href="javascript:saveAsItem();">
Save as...
</a></li>
<hr>
<li><a href="javascript:exitApp();">
Exit
</a></li>
</menu>
Using CSS and JavaScript, this menu might render like so:
Again, this is completely speculative and is just meant to illustrate a possibility.
With
menu
, it would also be possible to define a context menu, usually invoked by a
right-click:
<menu type="context" id="simpleMenu">
<li><a href="javascript:add();">
Add
</a></li>
<li><a href="javascript:edit();">
Edit
</a></li>
<li><a href="javascript:delete();">
Delete
</a></li>
</menu>
This could render something like this:
