第8章 链接和导航-拓展知识
第8章 链接和导航拓展知识
一. 纵向二级菜单设计
对一些管理网站和购物网站，经常在内容主体区域设置纵向导航菜单，菜单项较多空间有限时，往往对菜单分类，设计成折叠菜单或鼠标经过时悬浮显示下拉菜单。下面用CSS设计纵向的折叠菜单或鼠标经过时悬浮显示下拉菜单。
1. 纵向导航折叠菜单
【例tz8-1】纵向的折叠菜单，初始状态显示效果如图1所示，鼠标经过时如图2所示。
图1 纵向的折叠菜单初始状态
图2 鼠标经过纵向的折叠菜单时状态
折叠的网页纵向导航菜单由嵌套的无序列表实现。一级菜单的li元素中嵌套无序列表，对嵌套的无序列表设计CSS样式实现折叠的下拉菜单。默认状态下，嵌套的子菜单隐藏不显示，鼠标经过一级菜单时对应的子菜单显示。
页面文件和CSS样式的代码如下。
<head>
<meta charset="UTF-8">
<title>纵向导航折叠菜单</title>
<style>
*{ margin: 0; padding: 0; }
li{ list-style: none; }
/*纵向导航菜单盒子的样式定义*/
.menu{
width: 200px;
height: auto;
margin: 40px auto;
}
.item{
width: 100%;
height: auto;
}
/*一级菜单样式定义*/
.item h3{
height: 50px;
line-height: 50px;
background-color:#ddd;
color: #444;
border-bottom: 2px solid #fff;
padding-left: 20px;
}
/*折叠子菜单盒子的样式定义*/
.item .itembox{
width: 100%;
height: 0px;
overflow: hidden; /*元素溢出时隐藏*/
}
/*子菜单无序列表的样式定义*/
.item .itembox ul{
width: 100%;
height: auto;
background-color:#eee;
box-sizing: border-box; /*设置盒模型的类型*/
}
/* 折叠子菜单显示样式 */
.item .itembox ul li{
line-height: 40px;
border-bottom: 1px solid #fff;
padding-left: 40px;
}
/* 鼠标经过菜单时折叠子菜单显示样式 */
.item:hover .itembox{
height: auto;
}
/* 鼠标经过子菜单项时样式 */
.item .itembox ul li a{
color: #111;
text-decoration: none;
}
/*鼠标经过子菜单项时样式定义 */
.item .itembox ul li a:hover{
color: red;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<h3>产品中心</h3>
<div>
<ul>
<li><a href="#">折叠子菜单11</a></li>
<li><a href="#">折叠子菜单12</a></li>
<li><a href="#">折叠子菜单13</a></li>
<li><a href="#">折叠子菜单14</a></li>
<li><a href="#">折叠子菜单15</a></li>
</ul>
</div>
</li>
<li>
<h3>工程案例</h3>
<div>
<ul>
<li><a href="#">折叠子菜单21</a></li>
<li><a href="#">折叠子菜单22</a></li>
<li><a href="#">折叠子菜单23</a></li>
<li><a href="#">折叠子菜单24</a></li>
</ul>
</div>
</li>
<li>
<h3>新闻动态</h3>
<div>
<ul>
<li><a href="#">折叠子菜单31</a></li>
<li><a href="#">折叠子菜单32</a></li>
<li><a href="#">折叠子菜单33</a></li>
<li><a href="#">折叠子菜单34</a></li>
</ul>
</div>
</li>
<li>
<h3>招商加盟</h3>
<div>
<ul>
<li><a href="#">折叠子菜单41</a></li>
<li><a href="#">折叠子菜单42</a></li>
<li><a href="#">折叠子菜单43</a></li>
<li><a href="#">折叠子菜单44</a></li>
</ul>
</div>
</li>
</ul>
</div>
</body>
2.纵向导航鼠标经过悬浮显示下拉菜单
纵向导航菜单的子菜单也可以用悬浮方式显示，鼠标经过一级菜单时，对应的子菜单悬浮显示。
【例tz8-1】纵向导航鼠标经过悬浮显示下拉菜单，初始状态显示效果如图1所示，鼠标经过时如图3所示。
图3 鼠标经过悬浮显示下拉菜单时状态
本例文件的HTML页面代码和tz8-1相同，修改CSS样式代码，对嵌套的无序列表子菜单进行绝对定位，初始状态子菜单不显示，鼠标经过时，子菜单在一级菜单右侧悬浮显示，如图3所示。
tz8-2.html文件的CSS样式代码如下。
<style>
*{ margin: 0; padding: 0; }
li{ list-style: none; }
.menu{
width: 200px;
height: auto;
margin: 20px auto;
}
/*一级菜单相对定位*/
.item{
width: 100%;
height: auto;
position: relative; /*相对定位*/
}
.item h3{
height: 50px;
line-height: 50px;
background-color:#ddd;
color: #444;
border-bottom: 2px solid #fff;
padding-left: 10px;
position: relative;
text-align: center;
}
.item:hover h3{
background-color: antiquewhite; /*鼠标经过加背景颜色*/
}
/*子菜单盒子样式*/
.item .itembox{
position: absolute; /*绝对定位*/
left: 200px;
top: 10px;
width: 100%;
height: 0px;
overflow: hidden; /*元素溢出时隐藏*/
}
/*子菜单无序列表的样式定义*/
.item .itembox ul{
width: 100%;
height: auto;
background-color: #eee;
box-sizing: border-box; /*设置盒模型的类型*/
}
/* 折叠子菜单显示样式 */
.item .itembox ul li{
line-height: 40px;
border-bottom: 1px solid #fff;
padding-left: 20px;
}
/*对子菜单盒子绝对定位*/
.item:hover .itembox{
position: absolute; /*绝对定位*/
left: 200px;
top: 10px;
height: auto;
}
/* 鼠标经过子菜单项时样式 */
.item .itembox ul li a{
color: #111;
text-decoration: none;
}
/* 鼠标经过子菜单项时样式 */
.item .itembox ul li a:hover{
color: red;
}
</style>
【说明】对下拉菜单、悬浮菜单、折叠菜单等可以用JavaScript或jQuery实现。
