栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > Bootstrap教程

自定义左侧导航-1

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


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/243648.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号