继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

自定义左侧导航-1

MYYA
关注TA
已关注
手记 300
粉丝 75
获赞 326

自定义左侧导航-1_腾讯视频90

使用的插件

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


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP