17:03 自定义左侧导航

原创 ningcaichen66 教程 js前端 225阅读 2018-06-07 16:35:49 举报

使用的插件
BootStrap3.3.5
jQuery2.0
mCustomScrollbar(自定义滚动条)

nav.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>左侧导航</title>
<link rel="stylesheet" type="text/css" href="third/boot3/css/bootstrap.css">
<script type="text/javascript" src="third/jquery/jquery2.0.js"></script>

<link rel="stylesheet" type="text/css" href="third/scroll/jquery.mCustomScrollbar.css">
<script type="text/javascript" src="third/scroll/jquery-ui.min.js"></script>
<script type="text/javascript" src="third/scroll/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="third/scroll/jquery.mCustomScrollbar.min.js"></script>

<!-- 自己的 -->
<link rel="stylesheet" type="text/css" href="css/nav.css">
<script type="text/javascript" src="js/nav.js"></script>

</head>
<body>

<!-- 开启按钮 -->
<div id="open_flag_div">
    <a href="" title="" id="open_flag_a" class="btn btn-danger">
        <i class="glyphicon glyphicon-th-list"></i>
    </a>
</div>

<ul id="mynav_ok_m">
    <li id="first_li">
        <a href="" title="">全部</a>
    </li>

    <li>
        <a href="" title="" class="nav_level_1" flag="open"><i class="glyphicon glyphicon-folder-close"></i> 中医 <i class="glyphicon glyphicon-minus"></i></a>
        <div class="tow_level_div">
            <div class="two_nav_item">
                <a href="" title="" class="active"><i class="glyphicon glyphicon-cd"></i> 中医基础理论(1)</a>
            </div>
            <div class="two_nav_item">
                <a href="" title=""><i class="glyphicon glyphicon-cd"></i> 中医基础理论(2)</a>
            </div>
            <div class="two_nav_item">
                <a href="" title=""><i class="glyphicon glyphicon-cd"></i> 中医基础理论(3)</a>
            </div>
        </div>
    </li>

    <li>
        <a href="" title="" class="nav_level_1" flag="open">小程序 <i class="glyphicon glyphicon-minus"></i></a>
        <div class="tow_level_div">
            <div class="two_nav_item">
                <a href="" title="" class="">微信小程序(1)</a>
            </div>
            <div class="two_nav_item">
                <a href="" title="">微信小程序(2)</a>
            </div>
            <div class="two_nav_item">
                <a href="" title="">微信小程序(3)</a>
            </div>
        </div>
    </li>

    <li>
        <a href="" title="" class="nav_level_1" flag="open">功夫 <i class="glyphicon glyphicon-minus"></i></a>
        <div class="tow_level_div">
            <div class="two_nav_item">
                <a href="" title="" class="">截拳道教程(1)</a>
            </div>
            <div class="two_nav_item">
                <a href="" title="">截拳道教程(2)</a>
            </div>
        </div>
    </li>

    <li>
        <a href="" title="" class="nav_level_1" flag="open">中医 <i class="glyphicon glyphicon-minus"></i></a>
        <div class="tow_level_div">
            <div class="two_nav_item">
                <a href="" title="" class="">中医基础理论(1)</a>
            </div>
            <div class="two_nav_item">
                <a href="" title="">中医基础理论(2)</a>
            </div>
            <div class="two_nav_item">
                <a href="" title="">中医基础理论(3)</a>
            </div>
        </div>
    </li>

    <li>
        <a href="" title="" class="nav_level_1" flag="open">中医 <i class="glyphicon glyphicon-minus"></i></a>
        <div class="tow_level_div">
            <div class="two_nav_item">
                <a href="" title="" class="">中医基础理论(1)</a>
            </div>
            <div class="two_nav_item">
                <a href="" title="">中医基础理论(2)</a>
            </div>
            <div class="two_nav_item">
                <a href="" title="">中医基础理论(3)</a>
            </div>
        </div>
    </li>

    <li>
        <a href="" title="" class="nav_level_1" flag="open">中医 <i class="glyphicon glyphicon-minus"></i></a>
        <div class="tow_level_div">
            <div class="two_nav_item">
                <a href="" title="" class="">中医基础理论(1)</a>
            </div>
            <div class="two_nav_item">
                <a href="" title="">中医基础理论(2)</a>
            </div>
            <div class="two_nav_item">
                <a href="" title="">中医基础理论(3)</a>
            </div>
        </div>
    </li>

</ul>

</body>
</html>


nav.css

body,ul{
margin: 0px;
padding: 0px;
}

open_flag_div{

position: fixed;
left: 0px;
top: 45%;

}

open_flag_a{

border-radius: 0px;

}

mynav_ok_m{

position: fixed;
top: 0px;
/*left: 0px;*/
left: -400px;
width: 400px;
height: 100%;
overflow: auto;

background: #0f6f6f;
color: #fff;
z-index: 20;

list-style: none;

padding-top: 30px;
padding-bottom: 30px;
padding-right: 5px;

}

mynav_ok_m li{

padding-left: 30px;
padding-right: 30px;

}

mynav_ok_m li a{

/*color: #fff;*/
/*color: red;*/
text-decoration: none;

}

mynav_ok_m li a:hover{

text-decoration: none;

}

first_li{

text-align: center;

}

/二级/

mynav_ok_m li .tow_level_div{

/*border: 1px solid red;*/
/*background: #333;*/
/*padding-left: 30px;*/

}

mynav_ok_m li .tow_level_div .two_nav_item{

margin-top: 1px;
margin-bottom: 1px;

}

mynav_ok_m li .tow_level_div .two_nav_item a{

padding-left: 10%;
padding-right: 10%;
/*border: 1px solid red;*/
width: 80%;
/*width: auto;*/
display: inline-block;

}

mynav_ok_m a{

color: #fff;
height: 40px;
line-height: 40px;

}
/#mynav_ok_m a i.glyphicon-chevron-rights{
color: #fff;
}
/

mynav_ok_m a.active{

background: #fff;
color: #156b69;

}


nav.js

// 自定义滚动条
/**

**/
$(function(){
$("#mynav_ok_m").mCustomScrollbar({
scrollButtons:{enable:true,scrollType:"continuous"},
keyboard:{scrollType:"continuous"},
mouseWheel:{scrollAmount:188,normalizeDelta:true},
theme:"rounded-dark",
// theme:"3d-thick",
autoExpandScrollbar:true,
});
});

$(function(){
// 一级栏目拉出二级栏目
$('.nav_level_1').click(function (){
var This=$(this);
var li_parent=This.closest('li');
var flag=This.attr('flag');
if (flag == 'open') {
// 已经是展开的,现在要收缩
li_parent.find('.tow_level_div').stop(true,true).slideUp(function (){
This.attr('flag','close');
This.find('i').removeClass('glyphicon-minus').addClass('glyphicon-plus');
});
}else{
li_parent.find('.tow_level_div').stop(true,true).slideDown(function (){
This.attr('flag','open');
This.find('i').removeClass('glyphicon-plus').addClass('glyphicon-minus');
});
}

    return false;
});

});

// 开启导航框架
$(function(){
// 拉出来
$('#open_flag_a').click(function (){
// $('#mynav_ok_m').css({
// 'left':0,
// });
$('#mynav_ok_m').animate({
'left':0
},500,"swing",function (){

    });
    return false;
});

// 收回去
$(document).click(function (){
    $('#mynav_ok_m').animate({
        'left':-400
    },500,"swing",function (){

    }); 
});

$('#mynav_ok_m').click(function (){
    return false;
});

});

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复