课时7—侧边栏导航

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

图一

图二

 设计结构如下：

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

第一种实现方案：

css:

.header,.footer,.wrap-page{
  position:absolute;
  left:0;
  right:0;
}
.header,.footer{
  height:44px;
  background-color: #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;
}
.page-title{
  line-height:44px;
}
.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-color: #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 */
.panel {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 0;
  z-index: 980;
  width: 120px;
  background-color: #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, .nav-aside li a:active, .nav-aside li a.active {
  background-color: #404040;
}

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>  

Javascript:

$(function(){
  var $panelNav = $('#panelNav');
  $('#panelSwitch').tap(function(){
    if($panelNav.hasClass('active')){
      $panelNav.removeClass('active');
    }else{
      $panelNav.addClass('active');
    }
  });
});

 

 

第二种实现：

css:

.header,.footer,.wrap-page{
  position:absolute;
  left:0;
  right:0;
}
.header,.footer{
  height:44px;
  background-color: #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;
}
.page-title{
  line-height:44px;
}
.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-color: #ccc;
  display:inline-block;
  box-shadow: 0 7px 0 #ccc, 0 -7px 0 #ccc;
}
.wrap-page{
  top: 44px;
  bottom: 44px;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
}
.page{
    position: relative;
    padding: 10px;
}
.page p{
    margin-bottom: 10px;
}
/* panel */
.panel {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 0;
  z-index: 980;
  width: 120px;
  background-color: #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;
  display: block;
}
.nav-aside li a:hover, .nav-aside li a:active, .nav-aside li a.active {
  background-color: #404040;
}

HTML:

<header id="header" class="header">
      <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>  

Javascript:

$(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);
    }
  });
});

总结

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

如需转载，烦请注明出处：http://www.w3cplus.com/mobile/mobile-terminal-refactoring-sidebar-menu.html