自定义左侧导航-1

自定义左侧导航-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