移动端侧边栏实现

侧边栏效果是指从页面的左侧或者右侧滑出的模块效果，body元素的位置移动可选。

1 html

<body class="wx_spmenu_push">
<!-- 侧边栏开始 -->
  <nav class="wx_spmenu wx_spmenu_vertical wx_spmenu_left" id="wx_spmenu_s1">
    <h3>菜单</h3>
    <a href="#">个人中心</a>
    <a href="#">积分券</a>
    <a href="#">抽奖活动</a>
    <a href="#">在线学习</a>
  </nav>
  <!-- 侧边栏结束 -->

2 css

/*左侧划出效果开始*/
.wx_spmenu {background:#52c4d5;position: fixed;border-right:1px solid #4fb3cb;}
.wx_spmenu h3 {color: #fff;font-size: 1.9em;padding:15px;margin: 0;background: #52c4d5;border-bottom:1px solid #4fb3cb;}
.wx_spmenu a {display: block;color: #fff;font-size: 1em;}
.wx_spmenu a:hover {background: #4fb3cb;}
.wx_spmenu a:active {background: #afdefa;color: #47a3da;}
.wx_spmenu_vertical {width:210px;height: 100%;top: 0;z-index: 1000;}
.wx_spmenu_vertical a {border-bottom:1px solid #4fb3cb;padding: 1em;}
.wx_spmenu_left {left:-210px;}
.wx_spmenu_left.wx_spmenu_open {left: 0px;}
.wx_spmenu_push {/*	overflow-x: hidden;*/position: relative;left: 0;}
.wx_spmenu_pushToright {left:210px;}
.wx_spmenu,.wx_spmenu_push {-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;}
@media screen and (max-width: 55.1875em){
.wx_spmenu_horizontal {font-size: 75%;height: 110px;}
}
@media screen and (max-height: 26.375em){
.wx_spmenu_vertical {font-size: 90%;width: 190px;}
.wx_spmenu_left,.wx_spmenu_pushToleft {left: -190px;}
.wx_spmenu_right {right: -190px;}
.wx_spmenu_pushToright {left: 190px;}
}
.wx_spmenu_fix{left:210px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;}
/*左侧划出效果结束*/

3 javascript

 function sliderToLeft(){
        //划出
        var showLeftPush = document.getElementById('showLeftPush');
        var menuLeft = $('#wx_spmenu_s1');
        var flag = !menuLeft.hasClass('wx_spmenu_open');
        var wx_foot = $("#wx_foot");
        showLeftPush.onclick = function() {
          if(flag){
            $('body').addClass('wx_spmenu_pushToright');
            menuLeft.addClass('wx_spmenu_open');
            wx_foot.addClass('wx_spmenu_fix');
            flag = false;
          }else{
             $('body').removeClass('wx_spmenu_pushToright');
             menuLeft.removeClass('wx_spmenu_open');
             wx_foot.removeClass('wx_spmenu_fix');
             flag = true;
          }  
        };
    }

出处：http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/

posted @ 2015-08-18 09:13  一渡  阅读(185)  评论(0)    收藏  举报