jquery二级导航

效果图

直接放代码

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

base.css https://www.cnblogs.com/chenyingying0/p/12363689.html
cat.css

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

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

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

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

jquery.js
transition.js  https://www.cnblogs.com/chenyingying0/p/12363649.html
showhide.js  https://www.cnblogs.com/chenyingying0/p/12363707.html
dropdown.js  https://www.cnblogs.com/chenyingying0/p/12363739.html
cat.js

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

    "use strict";

cat
    $("#cat").find(".dropdown").on("dropdown-show",(e){
        loadOnce($(this),buildCatItem);
    }).dropdown({
        css3:true,js:
    });
    创建cat的item结构
     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">`;
            var j=0;j<data[i].items.length;j++){
                html+=`<a href="#">`+data[i].items[j]+`</a>`;
            }
            html+=`</dd></dl>`;
            
        }
        
        list.html(html);    
    }

加载一次数据
 loadOnce($elem,success){
    var dataLoad=$elem.data("load");

    if(!dataLoad) ;

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

        $.getJSON(dataLoad).done((data){
            success($elem,data);
        }).fail((){
            $elem.data("loaded",1)">false);
        });    
    }    
}



})(jQuery);

jquery二级导航

相关文章