17:03自定义左侧导航
17:03自定义左侧导航
使用的插件
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;
});
});
用户评论