手机端带二级菜单滑动导航的实现
实现的效果图： 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(); })//因为在实现触摸除了当前导航菜单二级菜单的隐藏，阻止冒泡事件** })