欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery二级导航

程序员文章站 2022-08-09 17:05:12
效果图 直接放代码 cat

效果图

jquery二级导航

 

 直接放代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>cat</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/cat.css">
</head>
<body>
    <div class="content">
        <div class="container">
            <div id="cat" class="cat">
                <a href="#" class="cat-title"><i class="cart-icon">#</i>商品分类</a>  
                <div class="cat-item dropdown" data-active="cat" data-load="../js/cat-1.json">
                    <div class="dropdown-toggle">
                        <a href="#" class="cat-item-link">家用电器</a>
                        <span class="dropdown-arrow cat-arrow">&gt;</span>
                    </div>
                    <div class="dropdown-list">
                        <div class="dropdown-loading"></div>
                    </div>
                </div>
                <div class="cat-item dropdown" data-active="cat" data-load="../js/cat-2.json">
                    <div class="dropdown-toggle">
                        <a href="#" class="cat-item-link">手机、运营商、数码</a>
                        <span class="dropdown-arrow cat-arrow">&gt;</span>
                    </div>
                    <div class="dropdown-list">
                        <div class="dropdown-loading"></div>
                    </div>
                </div>
                <div class="cat-item dropdown" data-active="cat" data-load="../js/cat-3.json">
                    <div class="dropdown-toggle">
                        <a href="#" class="cat-item-link">电脑、办公</a>
                        <span class="dropdown-arrow cat-arrow">&gt;</span>
                    </div>
                    <div class="dropdown-list">
                        <div class="dropdown-loading"></div>
                    </div>
                </div>
                <div class="cat-item dropdown" data-active="cat" data-load="../js/cat-4.json">
                    <div class="dropdown-toggle">
                        <a href="#" class="cat-item-link">家居、家具、家装、厨具</a>
                        <span class="dropdown-arrow cat-arrow">&gt;</span>
                    </div>
                    <div class="dropdown-list">
                        <div class="dropdown-loading"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>    
    <script src="../js/jquery.js"></script>
    <script src="../js/transition.js"></script>
    <script src="../js/showhide.js"></script>
    <script src="../js/dropdown.js"></script>
    <script src="../js/cat.js"></script>
</body>
</html>

base.css  
cat.css

/*公共样式 */
    .container{
        width:1200px;
        margin:0 auto;
    }
    .link{
        color:#4d555d;
    }
    a.link:hover{
        color:#f01414;
    }
    .fl{
        float:left;
    }
    .fr{
        float:right;
    }
    /*提取出过渡样式,可公用*/
    .transition{
        -webkit-transition:all .5s;
        -moz-transition:all .5s;
        -ms-transition:all .5s;
        -o-transition:all .5s;
        transition:all .5s;
    }
    /*文字隐藏*/
    .text-hidden{
        text-indent:-9999px;
        overflow:hidden;
    }
    /*文字溢出省略显示*/
    .text-ellipsis{
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis;
    }

/*dropdown下拉组件*/
    .dropdown{
        position: relative;
    }
    .dropdown-toggle{
        position: relative;
        z-index:4;
    }
    .dropdown-arrow{
        display: inline-block;
        vertical-align: middle;
        background-repeat: no-repeat;
        line-height:1;/*否则图标字体会继承父元素的line-height属性,占据过多空间*/
    }
    .dropdown-list{
        display: none;
        position: absolute;
        z-index:3;
    }
    .dropdown-left{
        left:0;
        right:auto;
    }
    .dropdown-right{
        right:0;
        left:auto;
    }
    .dropdown-loading{
        width:32px;
        height:32px;
        background:url(../img/loading.gif) no-repeat;
        margin:20px;
    }

/*showhide*/
    .fadeout{
        opacity: 0;
        visibility: hidden;
    }
    .slideupdowncollapse{
        height:0 !important;/*避免因为优先级不够而无法生效*/
        padding-top:0 !important;
        padding-bottom:0 !important;
    }
    .slideleftrightcollapse{
        width:0 !important;/*避免因为优先级不够而无法生效*/
        padding-left:0 !important;
        padding-right:0 !important;
    }

/*侧导航*/
    .cat{
        width:209px;
        height:566px;
        background-color:#f01414;
        position: absolute;
        top: -54px;
        z-index: 5;
    }
    .cat-title{
        display: inline-block;
        width:165px;
        height:54px;
        line-height:54px;
        color:#fff;
        font-size:14px;
        padding:0 22px;
        background-color:#c81414;
    }
    .cart-icon{
        color:#fff;
        font-style:normal;
        font-size:18px;
        margin-right:8px;
    }
    .cat-item{
        height:37px;
        line-height: 37px;
        padding-left:18px;
        color:#fff;
        border-left:1px solid #f01414;
        border-right:1px solid #f01414;
        position: static;/*覆盖掉之前的relative定位,使右边list相对于整个大容器进行顶部对齐*/
    }
    .cat-arrow{
        position: absolute;
        right: 20px;
        top: 9px;
    }
    .cat-item-link{
        color:#fff;
    }
    .cat .dropdown-loading{
        margin:220px auto 0;
    }
    .cat .dropdown-list{
        position: absolute;
        left:209px;
        top:54px;
        background:#fff;
        width:500px;
        box-shadow:0 0 5px rgba(0,0,0,.2);
        padding:20px;
        height:472px;
        overflow:hidden;
    }
    .dropdown-list-item{
        width:500px !important;
        display: block;
        margin:24px 0;
        line-height:20px;
    }
    .dropdown-list-item-title{
        display: block;
        float:left;
        width:84px;
        padding-right:16px;
        border-right:1px solid #333;
        text-align:right;
        font-weight:bold;
    }
    .dropdown-list-item-txt{
        display: inline-block;
        padding-left:15px;
        width:380px;
    }
    .dropdown-list-item-txt a{
        margin-right:16px;
        display: inline-block;/*否则内联元素换行时文字会被拆开*/
    }
    /*激活样式*/
    .cat-active.cat-item{
        background-color:#fff;
        color:#f01414;
    }
    .cat-active .cat-item-link{
        color:#f01414;
    }
    .cat-active .dropdown-list{
        display:block;
    }

 

jquery.js
transition.js  
showhide.js  
dropdown.js  
cat.js

// 不要暴露在全局,使用匿名函数自执行
(function($){

    "use strict";

//cat
    $("#cat").find(".dropdown").on("dropdown-show",function(e){
        loadonce($(this),buildcatitem);
    }).dropdown({
        css3:true,
        js:true,
        animation:"slideleftright"
    });
    //创建cat的item结构
    function buildcatitem($elem,data){
        var list=$elem.find(".dropdown-list");
        var html="";

        if(data.length===0) return;
        html=``;

        for(var i=0;i<data.length;i++){
            html+=`<dl class="dropdown-list-item">
                        <dt class="dropdown-list-item-title">
                            <a href="#">`+data[i].title+`</a>
                        </dt>
                        <dd class="dropdown-list-item-txt">`;
            for(var j=0;j<data[i].items.length;j++){
                html+=`<a href="#">`+data[i].items[j]+`</a>`;
            }
            html+=`</dd></dl>`;
            
        }
        
        list.html(html);    
    }

//加载一次数据
function loadonce($elem,success){
    var dataload=$elem.data("load");

    if(!dataload) return;

    if(!$elem.data("loaded")){
        $elem.data("loaded",true);

        $.getjson(dataload).done(function(data){
            success($elem,data);
        }).fail(function(){
            $elem.data("loaded",false);
        });    
    }    
}



})(jquery);