jquery三级导航，级联菜单精简

Posted 2020-12-26 yinwangyizhi

这是使用jQuery编辑的二级导航栏，效果是这样的。

而事实上，关于样式部分完全可以自由布局和修改，只要结构正确就行。

1.下面是html部分

<ul id="nav">
        <li><a href="#">一级导航1</a></li>
        <li><a href="#">一级导航2</a>
            <ul>
                <li><a href="#">二级导航1</a>
                    <ul>
                        <li><a href="#">三级导航1</a></li>
                        <li><a href="#">三级导航2</a></li>
                    </ul>
                </li>
                <li><a href="#">二级导航2</a></li>
                <li><a href="#">二级导航3</a></li>
            </ul>
        </li>
        <li><a href="#">一级导航3</a>
            <ul>
                <li><a href="#">二级导航1</a>
                    <ul>
                        <li><a href="#">三级导航1</a></li>
                        <li><a href="#">三级导航2</a></li>
                    </ul>
                </li>
                <li><a href="#">二级导航2</a></li>
                <li><a href="#">二级导航3</a></li>
            </ul>
        </li>
    </ul>

关于这部分，也是单纯的ul>li>ul>li...的嵌套

想要几个就加几个li，至于是在第一个li里追加ul还是在第二个li里追加，同样视情况而定就好。

总之第一层

<ul id="nav">
        <li><a href="#">一级导航1</a></li>
        <li><a href="#">一级导航2</a>
            。。。
        </li>
        <li><a href="#">一级导航3</a>
            。。。
        </li>
    </ul>

第二层

<ul id="nav">
        <li><a href="#">一级导航1</a></li>
        <li><a href="#">一级导航2</a>
            <ul>
                <li><a href="#">二级导航1</a>
                    。。。
                </li>
                <li><a href="#">二级导航2</a></li>
                <li><a href="#">二级导航3</a></li>
            </ul>
        </li>
        <li><a href="#">一级导航3</a>
            <ul>
                <li><a href="#">二级导航1</a>
                    。。。
                </li>
                <li><a href="#">二级导航2</a></li>
                <li><a href="#">二级导航3</a></li>
            </ul>
        </li>
    </ul>

第三层

<ul id="nav">
        <li><a href="#">一级导航1</a></li>
        <li><a href="#">一级导航2</a>
            <ul>
                <li><a href="#">二级导航1</a>
                    <ul>
                        <li><a href="#">三级导航1</a></li>
                        <li><a href="#">三级导航2</a></li>
                    </ul>
                </li>
                <li><a href="#">二级导航2</a></li>
                <li><a href="#">二级导航3</a></li>
            </ul>
        </li>
        <li><a href="#">一级导航3</a>
            <ul>
                <li><a href="#">二级导航1</a>
                    <ul>
                        <li><a href="#">三级导航1</a></li>
                        <li><a href="#">三级导航2</a></li>
                    </ul>
                </li>
                <li><a href="#">二级导航2</a></li>
                <li><a href="#">二级导航3</a></li>
            </ul>
        </li>
    </ul>

多少自己定，嗯！

2.css部分

这个我惭愧的说，你们还是自己按效果图去做吧！自己实在是可悲啊！居然想不出个样式来。

        *{
            margin: 0;
            padding: 0;
        }
        body {
            font-size: 0.85em;
            font-family: Verdana, Array, Helvetica, sans-serif;
        }
        #nav, #nav ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            list-style-position: outside;
            position: relative;
            line-height: 1.5em;
        }
        #nav a {
            display: block;
            padding: 0 5px;
            border: 1px solid #333;
            color: #fff;
            text-decoration: none;
            background: #f60;
        }
        #nav a:hover {
            background: #fff;
            color: #333;
        }
        #nav li {
            float: left;
            position: relative;
        }
        #nav ul {
            position: absolute;
            display: none;
            width: 12em;
            top: 1.5em;
        }
        #nav li ul a {
            width: 12em;
            display: block;
            height: auto;
            float: left;
        }
        #nav ul ul {
            top: auto;
            position: absolute;
            display: none;
            left: 12em;
            margin-bottom: 10px;
            z-index: 22;
        }

 

3.jquery部分

导入jquery后就编辑以下js脚本。

function main(){
        $("#nav ul").css({display: "none"});
        $("#nav li").hover(function(){
            $(this).find(‘ul:first‘).css({visibility:"visible"}).show(400);
        },function(){
            $(this).find(‘ul:first‘).css({visibility:"hidden"});
        });
    }
$(function(){
        main();
    })

大致的意思是：

　　1）先声明个函数

　　2）先将第二个第三个的ul给隐藏！通过css样式，利用jQuery里的$(selecter).css("名":"值");

　　　　//事实上，这部是针对游览器兼容的

　　3）然后使用鼠标悬浮和移开的函数进行编辑。

　　　　$(selecter).hover(【鼠标悬浮自定义函数】,【鼠标移开自定义函数】);

　　　　而里面则是

　　　　　　【鼠标悬浮自定义函数】查找选中的li下的第一个ul，然后将其显示，并以400秒的速度

　　　　　　【鼠标移开自定义函数】查找选中的li下的第一个ul，然后将其隐藏。