自定义左侧导航-1_腾讯视频
使用的插件
BootStrap3.3.5
jQuery2.0
mCustomScrollbar(自定义滚动条)
// 自定义滚动条
/******************************
******************************/
$(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;
});
});
作者:灵感编程
链接:https://www.jianshu.com/p/cb99b8e76207