移动端重构系列9-侧边栏导航

panel一般用来做侧边栏导航，铺满整屏高度，有两种展现形式：第一种直接盖在整块内容栏（包括header和footer部分）上面，如图一；第二种把整块内容栏推开panel的宽度，如图二

            

设计结构如下：

<header class="header"></header>
<div class="wrap-page">
    <section class="page"></section>
    ...
</div>
<footer class="footer"></footer>
<section class="panel"></section>

第一种实现方案：

demo 1

先将panel通过translate偏移负的本身宽度，离开可视区域，然后通过切换active这个class来实现无偏移。当然除此之外，top和bottom的0实现了100%高度，z-index要保证大于header和footer的层级。

其中两个例子都要在上面增加：<script src="http://www.w3cplus.com/mcommon/zepto.1.1.3.js"></script>

如HTML结构为：

<header id="header" class="header fixed-top">
              <span id="panelSwitch" class="btn-list fr"></span>
              <h1 class="page-title">panel测试</h1>
      </header>
      <div id="main" class="wrap-page">
        <section class="page" id="wrap">
              <div class="page-inner">
                   <p>这里可以增加内容...</p>
               </div>
         </section>
         </div>
      <footer class="footer">footer</footer>
      <section class="panel" id="panelNav">
        <ul class="nav-aside">
            <li><a href="#">Home</a></li>
            <li><a href="#">List</a></li>
            <li><a href="#">Demo</a></li>
            <li><a href="#">Download</a></li>
        </ul>
    </section>
    <script>
            $(function(){
              var $panelNav=$('#panelNav');
              $('#panelSwitch').tap(function(){
                  if($panelNav.hasClass('active')){
                    $panelNav.removeClass('active');
                  }else{
                    $panelNav.addClass('active');
                  }
              });
            });
    </script>

CSS样式为：

.header,.footer,.wrap-page{ position:absolute; left:0; right:0;}
.header,.footer{ height:44px; background:#fff; text-align:center; z-index:900; line-height:44px;}
.header{ top:0; border-bottom:1px solid #f00;}
.footer{ bottom:0; border-top:1px solid #f00;}
.fl{ float:left;}.fr{ float:right;}
.btn-list{ width:44px; height:44px; text-align:center; cursor:pointer;}
.btn-list:before{ content:''; width:20px; height:2px; background:#ccc; display:inline-block; box-shadow:0 7px 0 #ccc,0 -7px 0 #ccc;}
.wrap-page{ top:44px; bottom:44px; overflow:hidden;}
.page{ position:relative; padding:10px;}
.page p{ margin-bottom:10px;}
.panel{ position:absolute; top:-1px; bottom:-1px; left:0; z-index:980; width:120px; background:#333; -webkit-transform:translate3d(-120px,0,0);transform:translate3d(-120px,0,0);-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;}
.panel.active{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
.nav-aside{ line-height:40px;}
.nav-aside li{ border-bottom:1px solid #222; color:#fff;}
.nav-aside li a{ color:#fff; padding:0 5px; display:block;}
.nav-aside li a:hover{ background:#404040;}

 第二种实现方案

demo 2，在demo1的基础上根据第二种方案顺便处理下了当panel出现时，内容禁止滚动

因为需要实现整块内容栏（包括header和footer部分）偏移panel的宽度，所以第一反应是应该有个div把整块内容栏包裹下，既然这里需要一个父元素来实现一个偏移，为什么body不可以呢？所以果断干掉wrap-container，恢复最初的结构,如下：

HTML结构为：

<header id="header" class="header fixed-top">
              <span id="panelSwitch" class="btn-list fl"></span>
              <h1 class="page-title">panel测试</h1>
      </header>
      <div id="main" class="wrap-page">
        <section class="page" id="wrap"><div class="page-inner">
            <p>这里增加内容...</p>
        </div>
      </section>
         </div>
      <footer class="footer">footer</footer>
      <section class="panel" id="panelNav">
        <ul class="nav-aside">
            <li><a href="#">Home</a></li>
            <li><a href="#">List</a></li>
            <li><a href="#">Demo</a></li>
            <li><a href="#">Download</a></li>
        </ul>
    </section>
    <script>
            $(function(){
              var $body=$('body');
              function disableScroll(e){
                 e.preventDefault();
              }
              $('#panelSwitch').tap(function(){
                  if($body.hasClass('panel-active')){
                     $body.removeClass('panel-active');
                     $body.off('touchmove',disableScroll);
                  }else{
                     $body.addClass('panel-active');
                     $body.on('touchmove',disableScroll);
                  }
              });
            });
    </script>

CSS样式为：

.header,.footer,.wrap-page{ position:absolute; left:0; right:0;}
.header,.footer{ height:44px; background:#fff; text-align:center; z-index:900; line-height:44px;}
.header{ top:0; border-bottom:1px solid #f00;}
.footer{ bottom:0; border-top:1px solid #f00;}
.fl{ float:left;}.fr{ float:right;}
.btn-list{ width:44px; height:44px; text-align:center; cursor:pointer;}
.btn-list:before{ content:''; width:20px; height:2px; background:#ccc; display:inline-block; box-shadow:0 7px 0 #ccc,0 -7px 0 #ccc;}
.wrap-page{ top:44px; bottom:44px; overflow:hidden;}
.page{ position:relative; padding:10px;}
.page p{ margin-bottom:10px;}
.panel{ position:absolute; top:-1px; bottom:-1px; left:0; z-index:980; width:120px; background:#333; -webkit-transform:translate3d(-120px,0,0);transform:translate3d(-120px,0,0);}
body.has-panel{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;}
body.panel-active{-webkit-transform:translate3d(120px,0,0);transform:translate3d(120px,0,0);overflow-x:hidden;}
.nav-aside{ line-height:40px;}
.nav-aside li{ border-bottom:1px solid #222; color:#fff;}
.nav-aside li a{ color:#fff; padding:0 5px; displ0ay:block;}
.nav-aside li a:hover{ background:#404040;}

 

总结

一般来说使用比较多的还是第二种方案，因为第一种直接把左边的那个点击图标遮盖住了。而panel实际使用的时候还是挺不太好办的，因为左边的第一个icon一般都是放首页，返回什么的，当然适用不适用还是根据各自业务需要走