后台管理系统之侧边栏滑动打开

我相信我们在做后台管理系统的时候，一定会遇到打开关闭左侧或者右侧导航侧边栏的问题。那么今天我就来总结一下PC端和H5端打开关闭左侧导航栏的问题。

首先说一下PC的后台管理系统，当然不仅是js代码需要合理，html和css代码也需要合理才可以实现

那么我们先看一下效果：
这里写图片描述

正如我前面所说，合理的html,css和js配合在一起才能实现用最简单的方法实现这个展开收起侧边栏的功能。
代码如下：


<!--   html结构   -->
<div class="adminConWrap cf">
    <div class="adminLeft pr fl"></div>
    <div class="adminRight fl"></div>
</div>

<!--   css样式   -->
.adminConWrap{position: relative;height: 100%;}
.adminLeft{width:15%;height:100%;background: #1A2835;}
.adminRight{width:85%;overflow:visible;background: #FFF;}

 //js点击按钮关闭打开左侧侧边栏
$(document).on("click",'.leftClickBox',function(){
   var isLeft = $(".leftClickBox").hasClass('left');
   if(!isLeft){
       $(".leftClickBox").addClass('left');
       $('.adminLeft').animate({'left':'-15%','width':'0'},300);
       $('.adminRight').animate({'width':'100%'},300);

   }else{
       $(".leftClickBox").removeClass('left');
       $('.adminLeft').animate({'left':'0','width':'15%'},300);
       $('.adminRight').animate({'width':'85%'},300);
   }
});

然后说一下H5的左侧导航

同样我们先来看一下效果：

这里写图片描述

鉴于H5我使用了SUI Mobile框架，框架里面自带有打开侧栏的功能，所以我就用了SUI Mobile，同样代码如下：

<!--   引入框架文件   -->
<link href="/Static/Css/sm.css">
<script src="/Static/Js/zepto.min.js"></script>
<script src="/Static/Js/sm.js"></script>

<!--   html结构   -->
<div class="page-group ">
   <div class="page">
       <header class="bar bar-nav">
           <a class="icon icon-me pull-left open-panel" id="slideBtn"></a>  <!--   打开侧边栏的按钮   -->
       </header>
   </div>
   <div class="panel panel-left panel-reveal theme-dark" id='panel-left-demo'>
      <div class="content-block">
          <!--  侧边栏的内容   -->
      </div>
   </div>
</div>

用框架里面的虽然好，但是我们仍然还是可以有改进的地方的
打个比方，当侧边栏打开的时候，右侧的内容部分应该是不能够再进行操作的。我的做法是在右侧内容部分加了一个遮罩层。

后台管理系统之侧边栏滑动打开

猜你喜欢