bootstrap 合并菜单_Bootstrap 侧边抽屉菜单效果

效果图：

navibar(1).gif

HTML代码：

• 

  主页

• 

  信息管理

• 

  能耗管理

• 

  碳排放

• 

  在线审计

• 

  监控管理

• 

  计量数据

• 

  服务平台

  • 信息公告管理

  • 待办事项管理

  • 产品信息管理

  • 能源系数设置

• 

  系统设置

js代码：

$(function(){

$(".change").click(function(e){

/*切换折叠指示图标*/

$(this).find("span").toggleClass("glyphicon-chevron-up");

$(this).find("span").toggleClass("glyphicon-chevron-down");

});

});

function drawerCollapse(){

var state = $("#drawer").attr("data-state");

if (state == 'close'){

//设置打开

$(".page-sidebar").css("width","225px");

$(".page-content").css("margin-left","225px");

$("#drawer").attr("data-state",'open');

$(".menu-p").css("display","");

$(".collapse").css("display","");

$(".arrow").css("display","");

}else{

//设置关闭

$(".page-sidebar").css("width","75px");

$(".page-content").css("margin-left","75px");

$("#drawer").attr("data-state",'close');

$(".menu-p").css("display","none");

$(".collapse").css("display","none");

$(".arrow").css("display","none");

}

}