三级导航条

实现代码：

HTML+CSS：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>三级导航</title>
    <style type="text/css">
        *{margin:0px;padding:0px;}
        ul li{list-style:none;}
        #nav{font:14px/28px Microsoft YaHei;padding:0 20px;background:#f6f6f6;border:1px solid #ccc;margin:20px;_zoom:1;white-space:nowrap;}
        #nav .nav_li{float:left;position:relative;z-index:10;}
        #nav .nav_li h2{font-size:16px;line-height:35px;padding:0 20px;}
        #nav .current{border-left:1px solid #ccc;border-right:1px solid #ccc;background:#ddd;position:relative;z-index:30;}
        #nav .list{position:absolute;top:32px;left:0px;z-index:20;padding:5px;border:1px solid #ccc;background:#ddd;}
        #nav .list .list_li{position:relative;}
        #nav .list .list_li p{padding:0 10px;position:relative;z-index:90;}
        #nav .list .list_li .current{border:1px solid #bbb;border-right:none;background:#ccc;z-index:90;}
        #nav .child_list{position:absolute;top:0px;left:98px;z-index:20;border:1px solid #bbb;background:#ccc;}
        #nav .child_list li{padding:0 10px;position:relative;z-index:20;}
        #nav .list,#nav .child_list{display:none;}
    </style>
</head>
<body>
<div id="nav">
    <ul class="nav_ul">
        <li class="nav_li">
            <h2><a href="#">菜单1</a></h2>
            <div class="list">
                <ul class="list_ul">
                    <li class="list_li">
                        <p>二级子菜单1</p>
                        <div class="child_list">
                            <ul>
                                <li><a href="#">三级子菜单1</a></li>
                                <li><a href="#">三级子菜单2</a></li>
                                <li><a href="#">三级子菜单3</a></li>
                                <li><a href="#">三级子菜单4</a></li>
                                <li><a href="#">三级子菜单5</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="list_li">
                        <p>二级子菜单2</p>
                        <div class="child_list">
                            <ul>
                                <li><a href="#">三级子菜单1</a></li>
                                <li><a href="#">三级子菜单2</a></li>
                                <li><a href="#">三级子菜单3</a></li>
                                <li><a href="#">三级子菜单4</a></li>
                                <li><a href="#">三级子菜单5</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="list_li">
                        <p>二级子菜单3</p>
                        <div class="child_list">
                            <ul>
                                <li><a href="#">三级子菜单1</a></li>
                                <li><a href="#">三级子菜单2</a></li>
                                <li><a href="#">三级子菜单3</a></li>
                                <li><a href="#">三级子菜单4</a></li>
                                <li><a href="#">三级子菜单5</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="list_li">
                        <p>二级子菜单4</p>
                        <div class="child_list">
                            <ul>
                                <li><a href="#">三级子菜单1</a></li>
                                <li><a href="#">三级子菜单2</a></li>
                                <li><a href="#">三级子菜单3</a></li>
                                <li><a href="#">三级子菜单4</a></li>
                                <li><a href="#">三级子菜单5</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </li>
        <li class="nav_li">
            <h2><a href="#">菜单2</a></h2>
            <div class="list">
                <ul class="list_ul">
                    <li class="list_li">
                        <p>二级子菜单1</p>
                        <div class="child_list">
                            <ul>
                                <li><a href="#">三级子菜单1</a></li>
                                <li><a href="#">三级子菜单2</a></li>
                                <li><a href="#">三级子菜单3</a></li>
                                <li><a href="#">三级子菜单4</a></li>
                                <li><a href="#">三级子菜单5</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="list_li">
                        <p>二级子菜单2</p>
                        <div class="child_list">
                            <ul>
                                <li><a href="#">三级子菜单1</a></li>
                                <li><a href="#">三级子菜单2</a></li>
                                <li><a href="#">三级子菜单3</a></li>
                                <li><a href="#">三级子菜单4</a></li>
                                <li><a href="#">三级子菜单5</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="list_li">
                        <p>二级子菜单3</p>
                        <div class="child_list">
                            <ul>
                                <li><a href="#">三级子菜单1</a></li>
                                <li><a href="#">三级子菜单2</a></li>
                                <li><a href="#">三级子菜单3</a></li>
                                <li><a href="#">三级子菜单4</a></li>
                                <li><a href="#">三级子菜单5</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="list_li">
                        <p>二级子菜单4</p>
                        <div class="child_list">
                            <ul>
                                <li><a href="#">三级子菜单1</a></li>
                                <li><a href="#">三级子菜单2</a></li>
                                <li><a href="#">三级子菜单3</a></li>
                                <li><a href="#">三级子菜单4</a></li>
                                <li><a href="#">三级子菜单5</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </li>
        <li class="nav_li">
            <h2><a href="#">菜单3</a></h2>
            <div class="list">
                <ul class="list_ul">
                    <li class="list_li">
                        <p>二级子菜单1</p>
                        <div class="child_list">
                            <ul>
                                <li><a href="#">三级子菜单1</a></li>
                                <li><a href="#">三级子菜单2</a></li>
                                <li><a href="#">三级子菜单3</a></li>
                                <li><a href="#">三级子菜单4</a></li>
                                <li><a href="#">三级子菜单5</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="list_li">
                        <p>二级子菜单2</p>
                        <div class="child_list">
                            <ul>
                                <li><a href="#">三级子菜单1</a></li>
                                <li><a href="#">三级子菜单2</a></li>
                                <li><a href="#">三级子菜单3</a></li>
                                <li><a href="#">三级子菜单4</a></li>
                                <li><a href="#">三级子菜单5</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="list_li">
                        <p>二级子菜单3</p>
                        <div class="child_list">
                            <ul>
                                <li><a href="#">三级子菜单1</a></li>
                                <li><a href="#">三级子菜单2</a></li>
                                <li><a href="#">三级子菜单3</a></li>
                                <li><a href="#">三级子菜单4</a></li>
                                <li><a href="#">三级子菜单5</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="list_li">
                        <p>二级子菜单4</p>
                        <div class="child_list">
                            <ul>
                                <li><a href="#">三级子菜单1</a></li>
                                <li><a href="#">三级子菜单2</a></li>
                                <li><a href="#">三级子菜单3</a></li>
                                <li><a href="#">三级子菜单4</a></li>
                                <li><a href="#">三级子菜单5</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </li>
        <li class="nav_li">
            <h2><a href="#">菜单4</a></h2>
            <div class="list">
                <ul class="list_ul">
                    <li class="list_li">
                        <p>二级子菜单1</p>
                        <div class="child_list">
                            <ul>
                                <li><a href="#">三级子菜单1</a></li>
                                <li><a href="#">三级子菜单2</a></li>
                                <li><a href="#">三级子菜单3</a></li>
                                <li><a href="#">三级子菜单4</a></li>
                                <li><a href="#">三级子菜单5</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="list_li">
                        <p>二级子菜单2</p>
                        <div class="child_list">
                            <ul>
                                <li><a href="#">三级子菜单1</a></li>
                                <li><a href="#">三级子菜单2</a></li>
                                <li><a href="#">三级子菜单3</a></li>
                                <li><a href="#">三级子菜单4</a></li>
                                <li><a href="#">三级子菜单5</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="list_li">
                        <p>二级子菜单3</p>
                        <div class="child_list">
                            <ul>
                                <li><a href="#">三级子菜单1</a></li>
                                <li><a href="#">三级子菜单2</a></li>
                                <li><a href="#">三级子菜单3</a></li>
                                <li><a href="#">三级子菜单4</a></li>
                                <li><a href="#">三级子菜单5</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="list_li">
                        <p>二级子菜单4</p>
                        <div class="child_list">
                            <ul>
                                <li><a href="#">三级子菜单1</a></li>
                                <li><a href="#">三级子菜单2</a></li>
                                <li><a href="#">三级子菜单3</a></li>
                                <li><a href="#">三级子菜单4</a></li>
                                <li><a href="#">三级子菜单5</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </li>
    </ul>
    <div style="clear:both;"></div>
</div>
</body>
</html>
View Code

JS:

<script type="text/javascript">
        window.onload = function () {
            var oDiv = document.getElementById("nav");
            var oLi = oDiv.getElementsByTagName("li");

            for (var i = 0; i < oLi.length; i++) {
                if (oLi[i].className == "nav_li") {
                    oLi[i].onmouseover = function () {
                        var aDiv = this.getElementsByTagName("div")[0];
                        var aH2 = this.getElementsByTagName("h2")[0];
                        aDiv.style.display = "block";
                        aH2.className = "current";
                    }
                    oLi[i].onmouseout = function () {
                        var aDiv = this.getElementsByTagName("div")[0];
                        var aH2 = this.getElementsByTagName("h2")[0];
                        aDiv.style.display = "none";
                        aH2.className = "";
                    }
                } else if (oLi[i].className == "list_li") {
                    oLi[i].onmouseover = function () {
                        var aDiv = this.getElementsByTagName("div")[0];
                        var aP = this.getElementsByTagName("p")[0];
                        aDiv.style.display = "block";
                        aP.className = "current";
                    }
                    oLi[i].onmouseout = function () {
                        var aDiv = this.getElementsByTagName("div")[0];
                        var aP = this.getElementsByTagName("p")[0];
                        aDiv.style.display = "none";
                        aP.className = "";
                    }
                }
            }
        }
    </script>

效果如下图所示：

posted @ 2013-11-21 15:39  白小虫  阅读(526)  评论(0)  编辑  收藏  举报