手机端带二级菜单滑动导航的实现

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/BeautyBeier/article/details/53434185

手机端带二级菜单滑动导航的实现

实现的效果图：

Swiper插件是开源、免费、强大的移动端触摸滑动插件。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。这个效果是freemode模式。
默认的这种模式下只能够实现一级导航，但是如果二级导航的话该如何实现呢？
下面这段代码是布局加样式的代码：

 <div class="swiper-head">

        <!-- Swiper -->
        <div class="swiper-container-head">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="index.html">首页</a>
                </div>
                <div class="swiper-slide">
                    <a href="product.html">产品中心</a>
                </div>
                <div class="swiper-slide">
                    <a href="service.html">客户服务</a>
                </div>
                <div class="swiper-slide swiper-menu">
                    <a href="javascript:void(0);" class='slide-down'>合作加盟</a>
                </div>
                <div class="swiper-slide swiper-menu">
                    <a href="javascript:void(0);" class='slide-down'>关于我们</a>
                </div>
            </div>
            <!-- Add Pagination -->
        </div>
    </div>
    <div class="swiper-list">
        <ul class="swiper-list-content swiper-list-content-1 cf">
            <li>
                <a href="cooperate.html">了解加盟</a>
            </li>
            <li>
                <a href="login.html">企业服务</a>
            </li>
        </ul>
        <ul class="swiper-list-content swiper-list-content-2 cf">
            <li>
                <a href="aboutus.html">公司介绍</a>
            </li>
            <li>
                <a href="trends-list.html">企业动态</a>
            </li>
            <li>
                <a href="employ.html">招贤纳士</a>
            </li>
        </ul>
    </div>

CSS样式

body {
        background:#fff;
        font-family:sans-serif, Helvetica Neue, Helvetica, Arial;
        font-size: 14px;
        color:#666;
        margin: 0;
        padding: 0;
    }
    ul, li{
        list-style: none;
    }
    .cf{zoom:1;}
    .cf:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}
     .swiper-container-head {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #e1e1e1;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #f5f5f5;
    position: relative;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .swiper-slide a {
    display: block;
    text-decoration: none;
    color: #666;
  }
  .swiper-slide a:link,
  a:visited {
    text-decoration: none;
  }
  .swiper-slide .slide-none {
    display: block;
  }
  .slide-down:after {
    content: '';
    width: 4px;
    height: 4px;
    border-left: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    left: 6px;
    transform: rotate(135deg);
    -webkit-transition: all 0.3s ease-in-out;
  }
  .down::after {
    transform: rotate(-45deg);
  }
  .swiper-list {
    width: 100%;
    height: 30px;
    display: block;
    position: fixed;
    top: 85px;
    z-index: 999999;
  }
  .swiper-list .swiper-list-content {
    width: 100%;
    height: auto;
    font-size: 16px;
    color: #666;
    text-align: center;
    line-height: 30px;
    padding: 0px;
    margin: 0px;
    background: #fbfbfb;
    opacity: 0.8;
  }
  .swiper-list .swiper-list-content li a {
    display: block;
    text-decoration: none;
    color: #666;
  }
  .swiper-list .swiper-list-content-1 {
    display: none;
  }
  .swiper-list .swiper-list-content-2 {
    display: none;
  }
  .swiper-list .swiper-list-content-1 li {
    width: 48%;
    height: auto;
    float: left;
  }
  .swiper-list .swiper-list-content-2 li {
    width: 33%;
    height: auto;
    float: left;
  }
  .swiper-list .slide-none {
    display: block;
  }
  .swiper-head {
    width: 100%;
    display: block;
    position: fixed;
    left: 0;
    top: 45px;
    z-index: 999999;
  }

最重要的是js部分来实现这种效果，当点击或滑动一级导航（除了带有二级导航的一级导航）时二级导航会消失，swiper很好的一点就是它可以留了接口callback函数来在各种触摸事件下添加相应的效果。添加动效可以用js也可以引入Jquery。

var swiper = new Swiper('.swiper-container-head', {
            slidesPerView:3,//这个参数是表示当前屏幕显示的菜单数
            paginationClickable: true,
            spaceBetween:0,//中间的间距
            freeMode: true,//开启freemode模式后有滑动的动效
            onTouchMove: function(swiper){//回调函数在触摸移动的时候触发
               $(".swiper-list-content").each(function(index,ele) {
                   $(ele).removeClass("slide-none");
               });
            }
        });
        $(".swiper-menu").each(function(index,ele){
            touch.on(ele,'tap',function(ev){
                ev.preventDefault();
                $(".slide-down").removeClass("down").eq(index).addClass("down");
                $(".swiper-list-content").removeClass("slide-none").eq(index).addClass("slide-none");
            })

            touch.on($(document),'tap',function(){
                if( $(".swiper-list-content").hasClass('slide-none')){
                    $(".swiper-list-content").removeClass('slide-none');
                }
                if($(".slide-down").hasClass("down")){
                    $(".slide-down").removeClass("down");
                }
            })
            touch.on($(".swiper-slide"),'tap',function(event){
                event.stopPropagation();
            })//因为在实现触摸除了当前导航菜单二级菜单的隐藏，阻止冒泡事件**
        })