jquery导航的下拉菜单代码 jquery 导航栏

转载

索姆拉 2023-05-24 10:49:30

文章标签 jquery 导航栏二级菜单 ico css 文章分类 jQuery 前端开发

整理了下比较常用的导航栏，其原理基本相同，一级菜单即主菜单，一级菜单的子元素就是二级菜单，二级菜单默认隐藏，通过鼠标移动来定位和显示二级菜单。

在Javascript中可以通过onmouseover和onmouseout事件来实现鼠标进入离开元素，在Jquery中则可以使用hover。代码如下：

$("#id").hover(
function(){
   //当鼠标放上去的时候,程序处理
},
function(){
   //当鼠标离开的时候,程序处理
});

以一个简单的菜单为例（结构）：

<ul>
        <li>
            菜单一
            <div style="display:none;position:absolute;">
                <ul>
                    <li>子菜单一</li>
                    <li>子菜单二</li>
                </ul>
            </div>
        </li>
        <li>菜单二</li>
        <li>菜单三</li>
    </ul>
    <script>
        $("li").hover(function () {
            $(this).find("div").show();//这里还需要定位元素
        }, function () {
            $(this).find("div").hide();
        });
    </script>

结构很简单，主要的还是样式。下面是常用的示例（样式冲突，http://www.boapi.net/api/test.html 查看完整demo）：

网站首页

个人信息

个人申请
住房申请住房申请
借款申请
机票申请

个人申请

个人申请
住房申请住房申请
借款申请
机票申请
其它申请
住房申请住房申请
借款申请
机票申请

代码

jquery导航的下拉菜单代码 jquery 导航栏_jquery

jquery导航的下拉菜单代码 jquery 导航栏_jquery_02

<div class="c02-nav">
        <div class="item">
            网站首页
        </div>
        <div class="item">
            个人信息
            <div class="c02-menu">
                <ul>
                    <li class="head">个人申请</li>
                    <li><a>住房申请住房申请</a></li>
                    <li><a>借款申请</a></li>
                    <li><a>机票申请</a></li>
                </ul>
            </div>
        </div>
        <div class="item">
            个人申请
            <div class="c02-menu">
                <ul>
                    <li class="head">个人申请</li>
                    <li><a>住房申请住房申请</a></li>
                    <li><a>借款申请</a></li>
                    <li><a>机票申请</a></li>
                </ul>
                <ul>
                    <li class="head">其它申请</li>
                    <li><a>住房申请住房申请</a></li>
                    <li><a>借款申请</a></li>
                    <li><a>机票申请</a></li>
                </ul>
            </div>
        </div>
    </div>

html

jquery导航的下拉菜单代码 jquery 导航栏_jquery

jquery导航的下拉菜单代码 jquery 导航栏_jquery_02

* {
    padding: 0;
    margin: 0;
    font-family: 微软雅黑,宋体,sans-serif !important;
}

a, img {
    border: 0;
}

a {
    outline: 0;
}

    a:link {
        color: #434343;
        text-decoration: none;
    }

    a:visited {
        color: #838383;
        text-decoration: none;
    }

    a:hover {
        color: #C00;
        text-decoration: none;
    }

.c02-nav {
    background-repeat: repeat-x;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075);
    background-image: linear-gradient(to bottom,#fff 0,#f8f8f8 100%);
    height: 50px;
}

    .c02-nav .logo {
        float: left;
        width: 120px;
        margin-top: 10px;
        margin-left: 10px;
    }

    .c02-nav .item {
        display: inline-block;
        padding: 15px;
        color: #666;
        cursor: pointer;
        font-size: 15px;
    }

        .c02-nav .item:hover {
            color: #333;
            background-color: rgba(0,0,0,.075);
        }

.c02-menu {
    display: none;
    padding: 10px;
    z-index: 9999;
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    -moz-box-shadow: 0 4px 16px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 4px 16px rgba(0,0,0,.5);
    box-shadow: 0 4px 16px rgba(0,0,0,.5);
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=180, Strength=4);
}

    .c02-menu .head {
        font-size: 15px;
        font-weight: 700;
        line-height: 28px;
        margin-right: 0;
        margin-bottom: 2px;
        background: 0 0;
        padding-left: 3px;
    }

    .c02-menu ul {
        float: left;
        margin-bottom: 10px;
        list-style: none;
        padding-left: 5px;
    }

    .c02-menu li {
        line-height: 25px;
        margin-right: 15px;
        font-size: 14px;
        padding-left: 5px;
    }

    .c02-menu a:hover {
        text-decoration: underline;
    }

css

jquery导航的下拉菜单代码 jquery 导航栏_jquery

jquery导航的下拉菜单代码 jquery 导航栏_jquery_02

$(".c02-nav .item").hover(function () {
                var $offset = $(this).offset();
                $(this).find(".c02-menu").css({ "top": $offset.top + 48, "left": $offset.left, "display": "block" });
            }, function () {
                $(this).find(".c02-menu").css("display", "none");
});

网站首页

个人信息

个人申请

申请1
申请2
申请3
申请4
申请5
申请6
申请7
申请8

借款申请

申请1
申请2
申请3
申请4
申请5
申请6
申请7
申请8

机票申请

申请1

个人申请

申请1
申请2
申请3
申请4
申请5
申请6
申请7
申请8

借款申请

申请1
申请2
申请3
申请4
申请5
申请6
申请7
申请8

机票申请

申请1

代码

jquery导航的下拉菜单代码 jquery 导航栏_jquery

jquery导航的下拉菜单代码 jquery 导航栏_jquery_02

<div >
        <ul >
            <li>
                <h3 ><a href="#" >网站首页</a></h3>
            </li>
            <li>
                <h3 ><a href="#" >个人信息</a></h3>
                <ul  >
                    <li>
                        <h3 ><a href="#" ><span class="icon10"></span>个人申请</a></h3>
                        <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>
                            <li><a href="#" >申请6</a></li>
                            <li><a href="#" >申请7</a></li>
                            <li><a href="#" >申请8</a></li>
                        </ul>
                    </li>
                    <li>
                        <h3 ><a href="#" ><span class="icon10"></span>借款申请</a></h3>
                        <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>
                            <li><a href="#" >申请6</a></li>
                            <li><a href="#" >申请7</a></li>
                            <li><a href="#" >申请8</a></li>
                        </ul>
                    </li>
                    <li>
                        <h3 ><a href="#" ><span class="icon10"></span>机票申请</a></h3>
                        <ul >
                            <li><a href="#" >申请1</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <h3 ><a href="#" >个人申请</a></h3>
                <ul  >
                    <li>
                        <h3 ><a href="#" ><span class="icon10"></span>个人申请</a></h3>
                        <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>
                            <li><a href="#" >申请6</a></li>
                            <li><a href="#" >申请7</a></li>
                            <li><a href="#" >申请8</a></li>
                        </ul>
                    </li>
                    <li>
                        <h3 ><a href="#" ><span class="icon10"></span>借款申请</a></h3>
                        <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>
                            <li><a href="#" >申请6</a></li>
                            <li><a href="#" >申请7</a></li>
                            <li><a href="#" >申请8</a></li>
                        </ul>
                    </li>
                    <li>
                        <h3 ><a href="#" ><span class="icon10"></span>机票申请</a></h3>
                        <ul >
                            <li><a href="#" >申请1</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

html

jquery导航的下拉菜单代码 jquery 导航栏_jquery

jquery导航的下拉菜单代码 jquery 导航栏_jquery_02

.c03-nav, .c03-nav h3, .c03-nav h3 a, .c03-nav li {
    background: url(../images/sprite.gif) no-repeat scroll left -9999px;
}

.c03-nav {
    height: 40px;
    line-height: 40px;
    background-repeat: repeat-x;
    background-position: 0 0;
    background-color: #C00;
    width: 100%;
}

    .c03-nav ul.menu li {
        position: relative;
        float: left;
        padding: 0 5px;
        background-position: 0 -40px;
        list-style-type: none;
    }

        .c03-nav ul.menu li h3 {
            padding: 0 15px 0 0;
            font-size: 1.2em;
        }

            .c03-nav ul.menu li h3 a.depth_1 {
                padding: 0 0 0 15px;
                display: inline-block;
                color: #FFF;
            }

            .c03-nav ul.menu li h3.hover, .c03-nav ul.menu li h3.selected {
                background-position: right -80px;
            }

                .c03-nav ul.menu li h3.hover a.depth_1, .c03-nav ul.menu li h3.selected a.depth_1 {
                    background-position: left -80px;
                    color: #C00;
                }

        .c03-nav ul.menu li.hover h3 {
            background-position: right -120px;
        }

            .c03-nav ul.menu li.hover h3 a.depth_1 {
                background-position: left -120px;
                color: #C00;
            }

        .c03-nav ul.menu li ul.children {
            position: absolute;
            left: 2px;
            top: 40px;
            z-index: 19;
            display: none;
            width: 393px;
            padding: 6px 7px 5px 6px;
            border: 3px solid #900;
            border-top: 0;
            background: #FFF;
        }

            .c03-nav ul.menu li ul.children li {
                width: 393px;
                padding: 0 0 1px 0;
                background: 0 0;
            }

                .c03-nav ul.menu li ul.children li.nosub {
                    width: 130px;
                    overflow: hidden;
                }

                .c03-nav ul.menu li ul.children li h3 a.depth_2 {
                    width: 120px;
                    line-height: 25px;
                    display: block;
                    font-weight: 400;
                    font-size: 9pt;
                    color: #900;
                }

                    .c03-nav ul.menu li ul.children li h3 a.depth_2 span.icon10 {
                        margin: 10px 3px 0 5px;
                        background-position: -60px -380px;
                    }

                .c03-nav ul.menu li ul.children li h3.selected {
                    background: #FFEFEF;
                }

                .c03-nav ul.menu li ul.children li.hover {
                    z-index: 20;
                }

                    .c03-nav ul.menu li ul.children li.hover h3 a.depth_2 {
                        background: #FFCFCF;
                        font-weight: 700;
                    }

                    .c03-nav ul.menu li ul.children li.hover ul {
                        background: #FFEFEF;
                        border-color: #FFBFBF;
                        height: auto;
                        z-index: 20;
                    }

                        .c03-nav ul.menu li ul.children li.hover ul li a.depth_3 {
                            color: #333;
                        }

                            .c03-nav ul.menu li ul.children li.hover ul li a.depth_3:hover {
                                color: #900;
                            }

            .c03-nav ul.menu li ul.children ul {
                position: absolute;
                top: 0;
                left: 120px;
                padding: 0 0 0 10px;
                width: 263px;
                height: 25px;
                overflow: hidden;
                background: #F4F8F9;
                border-left: 2px solid #D8E2EC;
            }

                .c03-nav ul.menu li ul.children ul li {
                    width: auto;
                    padding: 0;
                    float: left;
                }

                    .c03-nav ul.menu li ul.children ul li a.depth_3 {
                        margin: 0 15px 0 0;
                        line-height: 25px;
                        display: block;
                        color: #666;
                        white-space: nowrap;
                    }

                        .c03-nav ul.menu li ul.children ul li a.depth_3:hover {
                            text-decoration: underline;
                        }

                    .c03-nav ul.menu li ul.children ul li a.selected {
                        background: 0 0;
                        color: #900;
                    }

css

jquery导航的下拉菜单代码 jquery 导航栏_jquery

jquery导航的下拉菜单代码 jquery 导航栏_jquery_02

var navstr = '';

            for (c in vars = '0'.split(',')) {
                $('#menu_' + vars[c]).addClass('selected');
            }

            $('.c03-nav ul.menu > li').hover(function () {
                $(this).find('.children').show();
                if ($(this).find('.children').length) $(this).addClass('hover');
            }, function () {
                $('.children').hide();
                $(this).removeClass('hover');
            });

            $('.c03-nav ul.menu h3, .c03-nav ul.menu ul.children > li').hover(function () {
                $(this).addClass('hover');
            }, function () {
                $(this).removeClass('hover');
            });

网站首页
个人信息
个人申请

申请1

申请11 申请11 申请11 申请11 申请11 申请11 申请11

申请1

申请11 申请11 申请11 申请11 申请11 申请11 申请11

申请1

申请11 申请11 申请11 申请11 申请11 申请11 申请11

申请1

申请11 申请11 申请11 申请11 申请11 申请11 申请11

申请1

申请11 申请11 申请11 申请11 申请11 申请11 申请11

申请1

申请11 申请11 申请11 申请11 申请11 申请11 申请11

申请2

申请22 申请22 申请22 申请22 申请22 申请22 申请22

申请2

申请22 申请22 申请22 申请22 申请22 申请22 申请22

申请2

申请22 申请22 申请22 申请22 申请22 申请22 申请22

申请2

申请22 申请22 申请22 申请22 申请22 申请22 申请22

申请

申请申请申请申请申请申请

申请

申请申请申请申请申请申请

申请

申请申请申请申请申请申请

申请

申请申请申请申请申请申请

代码

jquery导航的下拉菜单代码 jquery 导航栏_jquery

jquery导航的下拉菜单代码 jquery 导航栏_jquery_02

<div class="c05-nav">
        <div class="list" id="navlist">
            <ul id="navfouce">
                <li><a href="#">网站首页</a></li>
                <li><a href="#">个人信息</a></li>
                <li><a href="#">个人申请</a></li>
            </ul>
        </div>
        <div class="box" id="navbox" style="height:0px;opacity:0;overflow:hidden;">
            <div class="cont" style="display:none;">
                <ul class="sublist clearfix">
                    <li>
                        <h3 class="mcate-item-hd"><span>申请1</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>申请1</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>申请1</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>申请1</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>申请1</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>申请1</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                        </p>
                    </li>
                </ul>
            </div>
            <div class="cont" style="display:none;">
                <ul class="sublist clearfix">
                    <li>
                        <h3 class="mcate-item-hd"><span>申请2</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>申请2</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>申请2</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>申请2</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                        </p>
                    </li>
                </ul>
            </div>
            <div class="cont" style="display:none;">
                <ul class="sublist clearfix">
                    <li>
                        <h3 class="mcate-item-hd"><span>申请</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>申请</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>申请</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>申请</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                        </p>
                    </li>
                </ul>
            </div>
        </div>
    </div>

html

jquery导航的下拉菜单代码 jquery 导航栏_jquery

jquery导航的下拉菜单代码 jquery 导航栏_jquery_02

.c05-nav {
    width: 100%;
    height: 41px;
    background: #074C52;
}

    .c05-nav .list ul {
        list-style-type: none;
    }

    .c05-nav .list li {
        float: left;
    }

    .c05-nav .list a {
        float: left;
        display: block;
        width: 95px;
        height: 42px;
        text-align: center;
        font: 700 14px/36px "微软雅黑";
        color: #fff;
    }

        .c05-nav .list a:hover {
            color: #FFA304;
        }

        .c05-nav .list a:hover, .nav .list .now {
            color: red;
            background: #fff;
        }

    .c05-nav .box {
        z-index: 10;
        position: absolute;
        left: -5px;
        top: 42px;
        width: 1006px;
        background: #FFF;
        overflow: hidden;
        height: 0;
        filter: alpha(opacity=0);
        opacity: 0;
        border-bottom: 2px solid #074c52;
    }

    .c05-nav .cont {
        position: relative;
        padding: 25px 0 0 24px;
    }

.sublist li {
    float: left;
    width: 168px;
    padding-right: 24px;
    padding-bottom: 24px;
}

    .sublist li h3.mcate-item-hd {
        font-family: '微软雅黑';
        padding-left: 2px;
        font-size: 14px;
        height: 26px;
        line-height: 26px;
        border-bottom: 1px dashed #666;
    }

    .sublist li p.mcate-item-bd {
        padding-left: 2px;
    }

        .sublist li p.mcate-item-bd a {
            height: 26px;
            line-height: 26px;
            margin-right: 5px;
            font-size: 12px;
            color: #666;
            text-decoration: none;
            display: inline-block;
        }

            .sublist li p.mcate-item-bd a:hover {
                color: #6c5143;
                text-decoration: underline;
            }

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    display: inline-table;
}

.clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

.clearfix {
    min-height: 1%;
}

css

jquery导航的下拉菜单代码 jquery 导航栏_jquery

jquery导航的下拉菜单代码 jquery 导航栏_jquery_02

var time = null;
            var list = $("#navlist");
            var box = $("#navbox");
            var lista = list.find("a");

            for (var i = 0, j = lista.length; i < j; i++) {
                if (lista[i].className == "now") {
                    var olda = i;
                }
            }

            var box_show = function (hei) {
                box.stop().animate({
                    height: hei,
                    opacity: 1
                }, 400);
            }

            var box_hide = function () {
                box.stop().animate({
                    height: 0,
                    opacity: 0
                }, 400);
            }

            lista.hover(function () {
                lista.removeClass("now");
                $(this).addClass("now");
                clearTimeout(time);
                var index = list.find("a").index($(this));
                box.find(".cont").hide().eq(index).show();
                var _top = $(this).offset().top + $(this).height();
                var _height = box.find(".cont").eq(index).height();
                $("#navbox").css("top", _top);
                box_show(_height)
            }, function () {
                time = setTimeout(function () {
                    box.find(".cont").hide();
                    box_hide();
                }, 50);
                lista.removeClass("now");
                lista.eq(olda).addClass("now");
            });

            box.find(".cont").hover(function () {
                var _index = box.find(".cont").index($(this));
                lista.removeClass("now");
                lista.eq(_index).addClass("now");
                clearTimeout(time);
                $(this).show();
                var _height = $(this).height() + 54;
                box_show(_height);
            }, function () {
                time = setTimeout(function () {
                    $(this).hide();
                    box_hide();
                }, 50);
                lista.removeClass("now");
                lista.eq(olda).addClass("now");
            });

网站首页
个人信息

住房申请	借款申请	机票申请	其他
申请1	申请1	申请1	申请1
申请2	申请2	申请2	申请2
申请3	申请3	申请3	申请3
申请4	申请4	申请4	申请4
申请5	申请5	申请5	申请5
申请6	其他...		申请6

个人申请

住房申请	借款申请
申请1	申请1
申请2

代码

jquery导航的下拉菜单代码 jquery 导航栏_jquery

jquery导航的下拉菜单代码 jquery 导航栏_jquery_02

<div class="c04-nav" style="clear:both;">
        <ul>
            <li class="nav-item" id="c04-home"><a href="#" class="nav-item-link">网站首页</a></li>
            <li class="nav-item" id="personal">
                <a href="#" class="nav-item-link">个人信息</a>
                <div class="nav-item-sub sl-shadow">
                    <table class="nav-item-table">
                        <thead>
                            <tr>
                                <th>住房申请</th>
                                <th>借款申请</th>
                                <th>机票申请</th>
                                <th class="last">其他</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><a href="#">申请1</a></td>
                                <td><a href="#">申请1</a></td>
                                <td><a href="#">申请1</a></td>
                                <td class="last"><a href="#">申请1</a></td>
                            </tr>
                            <tr>
                                <td><a href="#">申请2</a></td>
                                <td><a href="#">申请2</a></td>
                                <td><a href="#">申请2</a></td>
                                <td class="last"><a href="#">申请2</a></td>
                            </tr>
                            <tr>
                                <td><a href="#">申请3</a></td>
                                <td><a href="#">申请3</a></td>
                                <td><a href="#">申请3</a></td>
                                <td class="last"><a href="#">申请3</a></td>
                            </tr>
                            <tr>
                                <td><a href="#">申请4</a></td>
                                <td><a href="#">申请4</a></td>
                                <td><a href="#">申请4</a></td>
                                <td class="last"><a href="#">申请4</a></td>
                            </tr>
                            <tr>
                                <td><a href="#">申请5</a></td>
                                <td><a href="#">申请5</a></td>
                                <td><a href="#">申请5</a></td>
                                <td class="last"><a href="#">申请5</a></td>
                            </tr>
                            <tr>
                                <td><a href="#">申请6</a></td>
                                <td><a href="#">其他...</a></td>
                                <td></td>
                                <td class="last"><a href="#">申请6</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="angle sl-angle"></div>
            </li>
            <li class="nav-item" id="payment">
                <a href="#" class="nav-item-link">个人申请</a>
                <div class="nav-item-sub sl-shadow">
                    <table class="nav-item-table">
                        <thead>
                            <tr>
                                <th>住房申请</th>
                                <th class="last">借款申请</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><a href="#">申请1</a></td>
                                <td class="last"><a href="#">申请1</a></td>
                            </tr>
                            <tr>
                                <td><a href="#">申请2</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="angle sl-angle"></div>
            </li>
        </ul>
    </div>

html

jquery导航的下拉菜单代码 jquery 导航栏_jquery

jquery导航的下拉菜单代码 jquery 导航栏_jquery_02

.c04-nav {
    width: 100%;
    height: 45px;
    z-index: 999;
    background-color: #fff;
}

.nav-item {
    float: left;
    height: 45px;
    position: relative;
    list-style-type: none;
    background-color: #fff;
}

    .nav-item .nav-item-link {
        height: 45px;
        display: block;
        overflow: hidden;
        line-height: 45px;
        font-size: 15px;
        text-align: center;
    }

        .nav-item .nav-item-link, .nav-item .nav-item-link-active, .nav-item .nav-item-link:hover {
            background-repeat: no-repeat;
        }

.nav-item-sub {
    position: absolute;
    padding: 12px 3px;
    background: #fff;
    top: 45px;
}

.nav-item-table {
    background: none repeat scroll 0 0 #fff;
    white-space: nowrap;
}

    .nav-item-table td, .nav-item-table th {
        border-right: 1px solid #e7e7e7;
        padding: 3px 16px;
        white-space: nowrap;
    }

    .nav-item-table th {
        font-weight: 700;
        padding: 0 14px 3px 17px;
        border-collapse: separate;
        white-space: nowrap;
    }

        .nav-item-table td.last, .nav-item-table th.last {
            border-right: 0;
        }

    .nav-item-table a {
        color: #a0a0a0;
        display: block;
        padding-left: 3px;
        position: relative;
        vertical-align: middle;
    }

        .nav-item-table a:hover {
            background-color: #aaa;
            border-radius: 2px 2px 2px 2px;
            color: #fff;
            text-decoration: none;
            vertical-align: middle;
        }

.nav-item .nav-item-sub {
    display: none;
    z-index: 10;
}

.nav-item .angle {
    position: absolute;
    display: none;
    width: 15px;
    height: 15px;
    font-size: 0;
    top: 35px;
    right: 65px;
}

:root .angle {
    top: 35px;
    z-index: 10;
}

.nav-item-hover .nav-item-sub, .nav-item:hover .nav-item-sub {
    display: block;
}

.nav-item-hover .angle, .nav-item:hover .angle {
    display: block;
}

#c04-home .nav-item-link {
    width: 90px;
}

#personal .nav-item-link {
    width: 110px;
}

#personal .nav-item-sub {
    left: -44px;
}

#payment .nav-item-link {
    width: 110px;
    background-position: -221px -14px;
    margin-right: 20px;
}

    #payment .nav-item-link-active, #payment .nav-item-link:hover {
        background-position: -251px -75px;
    }

#payment .nav-item-sub {
    left: -83px;
}

.sl-shadow {
    -moz-box-shadow: 0 0 4px #999;
    -o-box-shadow: 0 0 4px #999;
    -webkit-box-shadow: 0 0 4px #999;
    box-shadow: 0 0 4px #999;
    -ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#a0a0a0,strength=0) progid:DXImageTransform.Microsoft.Shadow(color=#a0a0a0,direction=0,strength=2) progid:DXImageTransform.Microsoft.Shadow(color=#a0a0a0,direction=90,strength=2) progid:DXImageTransform.Microsoft.Shadow(color=#a0a0a0,direction=180,strength=2) progid:DXImageTransform.Microsoft.Shadow(color=#a0a0a0,direction=270,strength=2)";
}

.sl-angle {
    background-image: url(../images/3MxQutehzH.png);
}

.sl-angle {
    background-repeat: no-repeat;
    background-position: -385px -11px;
    overflow: hidden;
}

css

jquery导航的下拉菜单代码 jquery 导航栏_jquery

jquery导航的下拉菜单代码 jquery 导航栏_jquery_02

(function(a, b) {
    function r(a) {
        var b = -1;
        while (++b < f) a.createElement(e[b])
    }
    if (!(!window.attachEvent || !b.createStyleSheet || !
    function() {
        var a = document.createElement("div");
        a.innerHTML = "<elem></elem>";
        return a.childNodes.length !== 1
    }())) {
        a.iepp = a.iepp || {};
        var c = a.iepp,
            d = c.html5elements || "abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",
            e = d.split("|"),
            f = e.length,
            g = new RegExp("(^|\\s)(" + d + ")", "gi"),
            h = new RegExp("<(/*)(" + d + ")", "gi"),
            i = /^\s*[\{\}]\s*$/,
            j = new RegExp("(^|[^\\n]*?\\s)(" + d + ")([^\\n]*)({[\\n\\w\\W]*?})", "gi"),
            k = b.createDocumentFragment(),
            l = b.documentElement,
            m = l.firstChild,
            n = b.createElement("body"),
            o = b.createElement("style"),
            p = /print|all/,
            q;
        c.getCSS = function(a, b) {
            if (a + "" === undefined) return "";
            var d = -1,
                e = a.length,
                f, g = [];
            while (++d < e) {
                f = a[d];
                if (f.disabled) continue;
                b = f.media || b, p.test(b) && g.push(c.getCSS(f.imports, b), f.cssText), b = "all"
            }
            return g.join("")
        }, c.parseCSS = function(a) {
            var b = [],
                c;
            while ((c = j.exec(a)) != null) b.push(((i.exec(c[1]) ? "\n" : c[1]) + c[2] + c[3]).replace(g, "$1.iepp_$2") + c[4]);
            return b.join("\n")
        }, c.writeHTML = function() {
            var a = -1;
            q = q || b.body;
            while (++a < f) {
                var c = b.getElementsByTagName(e[a]),
                    d = c.length,
                    g = -1;
                while (++g < d) c[g].className.indexOf("iepp_") < 0 && (c[g].className += " iepp_" + e[a])
            }
            k.appendChild(q), l.appendChild(n), n.className = q.className, n.id = q.id, n.innerHTML = q.innerHTML.replace(h, "<$1font")
        }, c._beforePrint = function() {
            o.styleSheet.cssText = c.parseCSS(c.getCSS(b.styleSheets, "all")), c.writeHTML()
        }, c.restoreHTML = function() {
            n.innerHTML = "", l.removeChild(n), l.appendChild(q)
        }, c._afterPrint = function() {
            c.restoreHTML(), o.styleSheet.cssText = ""
        }, r(b), r(k);
        if (c.disablePP) return;
        m.insertBefore(o, m.firstChild), o.media = "print", o.className = "iepp-printshim", a.attachEvent("onbeforeprint", c._beforePrint), a.attachEvent("onafterprint", c._afterPrint)
    }
})(this, document)

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：java上传文件到服务器代码 java上传文件到指定服务器

下一篇：android机顶盒开发教程机顶盒开发板

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯