网页中导航栏的实现一般用ul li,
细节:一般一个页面中不可能只用一次ul li 所以在实现导航栏的时候,我们会对ul设置#nav(#menu)。
技术点(1):要对ul中的li设置成一排,所以用display:inline,将li并排布局。
技术点(2):li里面的a标签 需要设置为块级元素 + 但a标签 父级 li 不设置具体宽度,所以用display:inline-block;这样做是为了让 a 随着 li 并排继承,同时对a 设置宽度和高度等样式生效。
细节部分:ul#nav{ width:100%; height:60px; background:#00A2CA;margin:0 auto}
A:这里ul和#nav紧贴没有空格,代表#nav只针对ul标签设置,标签只有ul标签使用id=”nav”设置样式才能生效。
B:上代码没有在ul外再设置DIV,这样可以节约一个DIV实现同样布局。
原地址:http://www.divcss5.com/shili/s731.shtml
例子如下:
css部分
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
* { margin: 0; padding: 0; font-family: "Microsoft YaHei"; } ul, li { list-style: none; } a { text-decoration: none; } #Top { min-width: 1024px; height: 70px; } #Top .top-wrap { position: relative; max-width: 1300px; height: 100%; margin: 0 auto; border-left: 1px solid blue; border-right: 1px solid blue; } #Foot { position: absolute; top: 70px; left: 0; right: 0; bottom: 0; min-width: 1024px; } #Foot .nav-warp { width: 280px; height: 100%; } #Foot .nav-warp ul#nav-ul { width: 100%; height: 100%; font-size: 0px; } ul#nav-ul>li>a { display: inline-block; width: 200px; line-height: 55px; border-bottom: 2px solid #cccccc; font-size: 16px; color: #ffffff; font-weight: 700; padding-left: 80px; background-color: #00a2ca; } ul#nav-ul>li>a>.arrows{ width: 13px; height: 13px; display: inline-block; float: right; margin-right: 30px; margin-top: 22px; background-image: url("../images/right.png"); background-repeat: no-repeat; background-position: center center; } /*二级菜单样式 开始*/ ul.nav-ul2>li>a { display: inline-block; width: 200px; line-height: 40px; font-weight: inherit; font-size: 14px; color: #ffffff; background-color: #0095bb; border-bottom: 2px solid #C3C3C3; padding-left: 80px; } /*二级菜单样式 结束*/ /*二级菜单隐藏块*/ .li_hidden{ display: none; } .li_block{ display: block; } /*二级菜单隐藏块 结束*/
HTML+JS部分
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="../css/demo.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="Top"> <div class="top-wrap"></div> </div> <div id="Foot"> <div class="nav-warp"> <ul id="nav-ul"> <li class="com-li"> <a href="javascript:;"> <span class="icon"></span><!--这里作用是放图标的,为后期准备,这里暂时不用写--> 首页 </a> </li> <li class="com-li"> <a href="javascript:;"> <span class="icon"></span><!--这里作用是放图标的,为后期准备,这里暂时不用写--> HTML教程 <span class="arrows"></span> </a> <ul class="nav-ul2 li_hidden"> <li class="com-li2"><a href="###">HTML教程1</a></li> <li class="com-li2"><a href="###">HTML教程2</a></li> <li class="com-li2"><a href="###">HTML教程3</a></li> <li class="com-li2"><a href="###">HTML教程4</a></li> </ul> </li> <li class="com-li"> <a href="javascript:;"> <span class="icon"></span><!--这里作用是放图标的,为后期准备,这里暂时不用写--> CSS基础 <span class="arrows"></span> </a> </li> <li class="com-li"> <a href="javascript:;"> <span class="icon"></span><!--这里作用是放图标的,为后期准备,这里暂时不用写--> HTML CSS开发工具 <span class="arrows"></span> </a> </li> <li class="com-li"> <a href="javascript:;"> <span class="icon"></span><!--这里作用是放图标的,为后期准备,这里暂时不用写--> Jquery基础 <span class="arrows"></span> </a> </li> <li class="com-li"> <a href="javascript:;"> <span class="icon"></span><!--这里作用是放图标的,为后期准备,这里暂时不用写--> 帮助中心 <span class="arrows"></span> </a> <ul class="nav-ul2 li_hidden"> <li class="com-li2"><a href="###">HTML教程1</a></li> <li class="com-li2"><a href="###">HTML教程2</a></li> <li class="com-li2"><a href="###">HTML教程3</a></li> <li class="com-li2"><a href="###">HTML教程4</a></li> </ul> </li> </ul> </div> </div> <script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript"> $(function () { $(".com-li").click(function () { $this = $(this);//获取当前被点击的元素 //$this.find(".nav-ul2") 找打二级菜单 if ($this.find(".nav-ul2").hasClass("li_block")) {//如果菜单中有li_block这个类,也就是说二级菜单打开状态 $this.find(".arrows").css("background-image","url(../images/right.png)"); $this.find(".nav-ul2").removeClass("li_block"); // $(".com-li2").css("background-Color", "#0095bb").children("a").css("color", "#FFF"); }else{ $this.find(".nav-ul2").addClass("li_block");//展示二级菜单 $this.find(".arrows").css("background-image","url(../images/down.png)");//改变箭头方向 $this.siblings().find(".nav-ul2").removeClass("li_block");//其他同级元素 $this.siblings().find(".arrows").css("background-image", "url(../images/right.png)");//其他同级元素箭头方向 return false; } }) }) </script> </body> </html>
效果图