网页中的导航栏的实现

网页中导航栏的实现一般用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{ 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部分

* {
    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;
 }
/*二级菜单隐藏块 结束*/

View Code

HTML+JS部分

<!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>

View Code

效果图