《HTML5 开发实例大全》——1.10 使用< menu >标记元素实现菜单交互-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

《HTML5 开发实例大全》——1.10 使用< menu >标记元素实现菜单交互

简介:

本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章,第1.10节,作者: 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.10 使用< menu >标记元素实现菜单交互


<a href=https://yqfile.alicdn.com/57c9630f60e6369207b2ac58417f09cb4753462a.png" >

实例说明

在全新的HTML 5中,除了常用的内容交互元素外,使用较为频繁的还有菜单交互元素,此功能主要采用< menu >与< command >两个元素实现。本实例的目的是演示< menu >标记元素的基本用法。< menu >是HTML 5中的标记,此元素其实在HTML 2时就已经存在,但是在HTML 4被抛弃。现在在HTML 5中重新恢复使用,并且为其赋予了全新的功能。该元素常与< li >列表元素结合使用,用来定义一个列表式的菜单。< menu >的属性信息如表1-1所示。


e45fa4aeb4b48be256aa1038a4ebcd49da50d7f1

本实例的功能是在页面中通过< 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所示。


<a href=https://yqfile.alicdn.com/f8e24f0124666140f7819e525d1d0bf680032efb.png" >

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: