分享程序员开发的那些事...
更新时间：2022-09-11 23:36:28
本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.10节,作者： 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。
实例说明
在全新的HTML 5中，除了常用的内容交互元素外，使用较为频繁的还有菜单交互元素，此功能主要采用< menu >与< command >两个元素实现。本实例的目的是演示< menu >标记元素的基本用法。< menu >是HTML 5中的标记，此元素其实在HTML 2时就已经存在，但是在HTML 4被抛弃。现在在HTML 5中重新恢复使用，并且为其赋予了全新的功能。该元素常与< li >列表元素结合使用，用来定义一个列表式的菜单。< menu >的属性信息如表1-1所示。
本实例的功能是在页面中通过< menu >元素列表显示3行图文并茂的文本选项。首先添加了一个< menu >元素，在该元素中加入< li >列表元素；然后，在列表元素中分别放置一个< img >与< span >元素，用于展示图片与标题；最后使用CSS样式代码，当用户将鼠标光标移至某个< li >元素时，展示菜单中某选项被选中的效果。
具体实现
使用Dreamweaver创建一个名为“010.html”的文件，具体代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>使用<menu>元素</title>
<style type="text/css">
body{
padding:5px;
font-size:12px
}
menu{
padding:0;
margin:0;
display:block;
border: solid 1px #365167;
width:222px
}
menu li{
list-style-type:none;
padding:5px;
margin:5px;
height:28px;
width:200px
}
menu li:hover{
border: solid 1px #7DA2CE;
background-color:#CFE3FD
}
menu li img{
clear:both;
float:left;
padding-right:8px;
margin-top:-2px
}
menu li span{
padding-top:5px;
float:left;
font-size:13px
}
</style>
</head>
<body>
<menu>
<li>
<img src="1.png"></img>
<span>Firefox</span>
</li>
<li>
<img src="2.png"></img>
<span>Chrome</span>
</li>
<li>
<img src="3.png"></img>
<span>Safari</span>
</li>
</menu>
</body>
</html>
当使用< menu >定义菜单列表时，通常使用< menu >元素来定义菜单的框架，框架中的内容使用< li >元素来进行构造，以形成列表形状，如页面中加粗代码所示。另外，为了美化列表选项的展示效果，需要使用CSS样式来修饰，例如，样式代码中的加粗部分，表示通过CSS样式控制鼠标光标在移出与移入元素时的不同展示效果。注意菜单还可以嵌套在别的菜单中，形成带层次的菜单结构。
执行后的效果如图1-19所示。