利用CSS实现导航栏菜单—下拉菜单。
首先给出HTML下拉菜单布局格式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Stylin' with CSS - Figure 6.5 Drop-Down Menus</title>
<link rel="stylesheet" type="text/css" href="site.css">
</head>
<body>
<nav class="multi_drop_menu">
<ul>
<!-- first level menu items -->
<li><a href="#">Business</a>
<ul>
<!-- second level menu items-->
<li><a href="#">Economy</a></li>
<li><a href="#">Political</a>
<ul>
<!-- third level menu items -->
<li><a href="#">China</a></li>
<li><a href="#">World</a></li>
</ul>
</li>
<li><a href="#">Companies</a></li>
</ul>
</li>
<li><a href="#">Lifestyle</a>
<ul>
<!-- second level menu items-->
<li><a href="#">Fashion</a></li>
<li><a href="#">Celebrity</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Food</a></li>
</ul>
</li>
<li><a href="#">Sport</a>
<ul>
<!-- second level menu items-->
<li><a href="#">Soccer</a></li>
<li><a href="#">Basketball</a></li>
<li><a href="#">Volleyball</a></li>
<li><a href="#">Tennis</a></li>
<li><a href="#">Golf</a></li>
</ul>
</li>
<li><a href="#">Opinion</a>
<ul>
<!-- second level menu items-->
<li><a href="#">Editorials</a></li>
<li><a href="#">Columnists</a></li>
<li><a href="#">Contributors</a>
<li><a href="#">Specials</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
CSS样式通过连接site.css导入,site.css样式如下:
@charset "utf-8";
@import url(layout.css); /* 布局样式 */
@import url(visual.css); /* 视觉样式 */
将下拉菜单的布局和视觉样式分开,通过site.css统一导入。布局样式定义下拉菜单的布局和行为,视觉样式定义下拉菜单的字体、颜色、边框等。
第一步定义一级菜单:
1.layout.css:
body {
margin: 0;
padding: 0;
}
/* 添加功能样式(布局 定位) */
.multi_drop_menu * {
margin: 0;
padding: 0;
}
/* 强制ul包围li */
.multi_drop_menu ul {
float: left;
}
.multi_drop_menu li {
float: left;
list-style-type: none;
/* 为子菜单定义上下文 */
position: relative;
}
.multi_drop_menu li a {
/* 链接填充列表项 */
display: block;
border-right-style: solid;
text-decoration: none;
}
.multi_drop_menu li:last-child a{
border-right-style: none;
}
.multi_drop_menu li ul {
display: none;
}
定义布局后菜单显示效果如下:(显示效果隐藏子菜单,只显示一级菜单)
2.visual.css:
.multi_drop_menu {
font: 1em helvetica, arial, sans-serif;
}
.multi_drop_menu a {
/*让链接充满列表项*/
display: block;
/*文本颜色*/
color: #555;
/*背景颜色*/
background-color: #eee;
/*链接内边距*/
padding: .2em 1em;
/*边框分割线宽度*/
border-width: 3px;
/*指定边框透明 默认为文本颜色*/
/* border-color: transparent; */
}
.multi_drop_menu a:hover {
/*悬停时文本颜色*/
color:#fff;
/*悬停时背景色*/
background-color:#aaa;
}
.multi_drop_menu a:active {
/*点击时背景变色*/
background:#fff;
/*点击时文本变色*/
color:#ccc;
}
定义视觉后菜单显示效果如下:
第二步定义二级菜单:
子菜单在显示上是垂直方向显示,与一级菜单水平方向显示不同。
1.layout.css:
body {
margin: 0;
padding: 0;
}
/* 添加功能样式(布局 定位) */
.multi_drop_menu * {
margin: 0;
padding: 0;
}
/* 强制ul包围li */
.multi_drop_menu ul {
float: left;
}
.multi_drop_menu li {
float: left;
list-style-type: none;
/* 为子菜单定义上下文 */
position: relative;
}
.multi_drop_menu li a {
/* 链接填充列表项 */
display: block;
border-right-style: solid;
background-clip:padding-box;
text-decoration: none;
}
.multi_drop_menu li:last-child a{
border-right-style: none;
}
.multi_drop_menu li ul {
display: block;
/*相对于父菜单项定位*/
position:absolute;
/*左边与父菜单项对齐*/
left:0;
/*顶边与父菜单项底边对齐*/
/*即高度为父元素的高度 使其刚好位于父元素li下方*/
top:100%;
}
.multi_drop_menu li li {
/*停止浮动,恢复堆叠*/
float:none;
}
.multi_drop_menu li li ul {
/*继续隐藏三级下拉菜单*/
display:none;
}
2.visual.css
.multi_drop_menu {
font: 1em helvetica, arial, sans-serif;
}
.multi_drop_menu a {
/*让链接充满列表项*/
display: block;
/*文本颜色*/
color: #555;
/*背景颜色*/
background-color: #eee;
/*链接内边距*/
padding: .2em 1em;
/*边框分割线宽度*/
border-width: 3px;
/*指定边框透明 默认为文本颜色*/
border-color: transparent;
}
.multi_drop_menu a:hover {
/*悬停时文本颜色*/
color:#fff;
/*悬停时背景色*/
background-color:#aaa;
}
.multi_drop_menu a:active {
/*点击时背景变色*/
background:#fff;
/*点击时文本变色*/
color:#ccc;
}
/*二级菜单宽度*/
.multi_drop_menu li ul {
width:9em;
}
.multi_drop_menu li li a {
/*去掉继承的右边框*/
border-right-style:none;
/*添加上边框*/
border-top-style:solid;
}
定以后显示效果如下图:
接下来定义下拉菜单行为,点击时显示下拉列表:
首先将其隐藏
.multi_drop_menu li ul {display: none;}
当鼠标悬停时再显示
.multi_drop_menu li:hover > ul{display:block; }
其中这里用到了子选择符号 >,只选择父元素li 的子元素 ul,不包括孙子及其后代的ul,不然三级列表也会显示。
最后添加三级菜单:
.multi_drop_menu li li ul { position:absolute; left:100%; top:0; }
.multi_drop_menu li li li a { border-left-style:solid;}
最终显示效果:
最后为增加可重用性,为顶级菜单增加个 vertical类属性。<nav class="multi_drop_menu vertical">
用于当顶级菜单需要垂直显示时使用。在layout.css中添加用于垂直显示时的布局
/*顶级垂直菜单宽度*/
.multi_drop_menu.vertical {width:8em;}
.multi_drop_menu.vertical li a {
border-right-style:none;
border-top-style:solid;
}
.multi_drop_menu.vertical li li a {border-left-style:solid;}
.multi_drop_menu.vertical ul,
.multi_drop_menu.vertical li {
/*让顶级菜单垂直显示*/
float:none;
}
.multi_drop_menu.vertical li ul {
/*子菜单左边与上一级菜单右边对齐*/
left:100%;
/*子菜单顶边与上一级菜单项顶边对齐*/
top:0;
}
效果如图所示:
效果图中还突出显示了点击路径,只要在visual.css中把.multi_drop_menu a:hover{}替换成下面代码即可
.multi_drop_menu li:hover > a{
/*悬停时的文本颜色*/
color:#fff;
/*悬停时的背景颜色*/
background-color:#aaa
}