首页 > 代码库 > NAV导航栏———下拉菜单
NAV导航栏———下拉菜单
利用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="http://www.mamicode.com/site.css"></head><body> <nav class="multi_drop_menu"> <ul> <!-- first level menu items --> <li><a href="http://www.mamicode.com/#">Business</a> <ul> <!-- second level menu items--> <li><a href="http://www.mamicode.com/#">Economy</a></li> <li><a href="http://www.mamicode.com/#">Political</a> <ul> <!-- third level menu items --> <li><a href="http://www.mamicode.com/#">China</a></li> <li><a href="http://www.mamicode.com/#">World</a></li> </ul> </li> <li><a href="http://www.mamicode.com/#">Companies</a></li> </ul> </li> <li><a href="http://www.mamicode.com/#">Lifestyle</a> <ul> <!-- second level menu items--> <li><a href="http://www.mamicode.com/#">Fashion</a></li> <li><a href="http://www.mamicode.com/#">Celebrity</a></li> <li><a href="http://www.mamicode.com/#">Travel</a></li> <li><a href="http://www.mamicode.com/#">Food</a></li> </ul> </li> <li><a href="http://www.mamicode.com/#">Sport</a> <ul> <!-- second level menu items--> <li><a href="http://www.mamicode.com/#">Soccer</a></li> <li><a href="http://www.mamicode.com/#">Basketball</a></li> <li><a href="http://www.mamicode.com/#">Volleyball</a></li> <li><a href="http://www.mamicode.com/#">Tennis</a></li> <li><a href="http://www.mamicode.com/#">Golf</a></li> </ul> </li> <li><a href="http://www.mamicode.com/#">Opinion</a> <ul> <!-- second level menu items--> <li><a href="http://www.mamicode.com/#">Editorials</a></li> <li><a href="http://www.mamicode.com/#">Columnists</a></li> <li><a href="http://www.mamicode.com/#">Contributors</a> <li><a href="http://www.mamicode.com/#">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 }
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。