zoukankan      html  css  js  c++  java
  • 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):

     代码

    <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
    * {
        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
    $(".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");
    });
    js

     代码

    <div class="c03-nav">
            <ul class="menu ul">
                <li>
                    <h3 class="selected"><a href="#" class="depth_1">网站首页</a></h3>
                </li>
                <li>
                    <h3 id="menu_02"><a href="#" class="depth_1">个人信息</a></h3>
                    <ul id="children_02" class="children">
                        <li>
                            <h3 id="menu_02a"><a href="#" class="depth_2"><span class="icon10"></span>个人申请</a></h3>
                            <ul id="children_02a">
                                <li><a href="#" class="depth_3">申请1</a></li>
                                <li><a href="#" class="depth_3">申请2</a></li>
                                <li><a href="#" class="depth_3">申请3</a></li>
                                <li><a href="#" class="depth_3">申请4</a></li>
                                <li><a href="#" class="depth_3">申请5</a></li>
                                <li><a href="#" class="depth_3">申请6</a></li>
                                <li><a href="#" class="depth_3">申请7</a></li>
                                <li><a href="#" class="depth_3">申请8</a></li>
                            </ul>
                        </li>
                        <li>
                            <h3 id="menu_02b"><a href="#" class="depth_2"><span class="icon10"></span>借款申请</a></h3>
                            <ul id="children_02b">
                                <li><a href="#" class="depth_3">申请1</a></li>
                                <li><a href="#" class="depth_3">申请2</a></li>
                                <li><a href="#" class="depth_3">申请3</a></li>
                                <li><a href="#" class="depth_3">申请4</a></li>
                                <li><a href="#" class="depth_3">申请5</a></li>
                                <li><a href="#" class="depth_3">申请6</a></li>
                                <li><a href="#" class="depth_3">申请7</a></li>
                                <li><a href="#" class="depth_3">申请8</a></li>
                            </ul>
                        </li>
                        <li>
                            <h3 id="menu_02c"><a href="#" class="depth_2"><span class="icon10"></span>机票申请</a></h3>
                            <ul id="children_02c">
                                <li><a href="#" class="depth_3">申请1</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <h3 id="H1"><a href="#" class="depth_1">个人申请</a></h3>
                    <ul id="Ul1" class="children">
                        <li>
                            <h3 id="H2"><a href="#" class="depth_2"><span class="icon10"></span>个人申请</a></h3>
                            <ul id="Ul2">
                                <li><a href="#" class="depth_3">申请1</a></li>
                                <li><a href="#" class="depth_3">申请2</a></li>
                                <li><a href="#" class="depth_3">申请3</a></li>
                                <li><a href="#" class="depth_3">申请4</a></li>
                                <li><a href="#" class="depth_3">申请5</a></li>
                                <li><a href="#" class="depth_3">申请6</a></li>
                                <li><a href="#" class="depth_3">申请7</a></li>
                                <li><a href="#" class="depth_3">申请8</a></li>
                            </ul>
                        </li>
                        <li>
                            <h3 id="H3"><a href="#" class="depth_2"><span class="icon10"></span>借款申请</a></h3>
                            <ul id="Ul3">
                                <li><a href="#" class="depth_3">申请1</a></li>
                                <li><a href="#" class="depth_3">申请2</a></li>
                                <li><a href="#" class="depth_3">申请3</a></li>
                                <li><a href="#" class="depth_3">申请4</a></li>
                                <li><a href="#" class="depth_3">申请5</a></li>
                                <li><a href="#" class="depth_3">申请6</a></li>
                                <li><a href="#" class="depth_3">申请7</a></li>
                                <li><a href="#" class="depth_3">申请8</a></li>
                            </ul>
                        </li>
                        <li>
                            <h3 id="H4"><a href="#" class="depth_2"><span class="icon10"></span>机票申请</a></h3>
                            <ul id="Ul4">
                                <li><a href="#" class="depth_3">申请1</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    html
    .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
     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');
                });
    js

     代码

    <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
    .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
    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");
                });
    js

     代码

    <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
    .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
    (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]) ? "
    " : c[1]) + c[2] + c[3]).replace(g, "$1.iepp_$2") + c[4]);
                return b.join("
    ")
            }, 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)
    js

    如果不全或错误可以在 http://www.boapi.net/api/test.html 查看完整demo,没有的资源记得右键源代码

  • 相关阅读:
    HTML link标签media参数
    初始化一个本地GIT仓储
    总结一下js的原型和原型链
    根据用户注册信息推荐 代码部分
    冷启动问题概述
    概率图模型
    LFM 隐语义模型
    item Collaborative Filtering
    推荐系统评测
    user Collaborative Filtering
  • 原文地址:https://www.cnblogs.com/liuxiaobo93/p/5505429.html
Copyright © 2011-2022 走看看