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

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

实现的效果图：

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

手机端带二级菜单滑动导航的实现相关推荐

css二级菜单的隐藏与显示_具有二级菜单的导航案例
下图为具有二级菜单的导航效果,鼠标悬浮在"服装"菜单时出现如图所示的二级菜单效果. 鼠标悬浮于二级菜单效果如下图所示: 注:鼠标悬浮于菜单时,二级菜单背景颜色为渐变,渐变颜色值为# ...
Java外卖点餐送餐平台源码带手机端带文档（源码分享）
Java仿饿了么外卖点餐送餐平台源码带手机端带文档(源码分享) 一个简单的外卖系统,包括手机端,后台管理,api基于spring boot和vue的前后端分离的外卖系统.包含手机端,后台管理功能. 核 ...
知道系统源码/知识问答系统源码/完整PC+手机端带功能强大后台管理系统
仿百度知道系统源码,知识问答系统源码,带有完整的PC端.手机端界面,功能强大后台管理,非常适用于垂直问答社区类行业网站使用. 阿国简单测试了一下,系统功能比较完善,界面部门需要简单优化一下,整体还是很 ...
html禁止页面左右滑动,手机端禁止浏览器左右滑动
在手机端vue项目中,禁止页面左右滑动,代码直接写在index.html中 var startPos = 0,endPos = 0,isScrolling = 0; document.addEvent ...
微信小程序 PC端与手机端显示不一致之tabBar导航栏
在编写微信小程序项目时,一开始为了显示出页面样式,我在app.json中,tabBar导航栏的list中设置了三个数组,对应三个导航块.但是三个导航块list中的pagePath设置为同一页面page ...
Bootstrap手机端下拉菜单（铺满）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
JS手机端touch事件计算滑动距离的方法
计算手势在手机屏幕上滑动时,手势滑动的距离,代码如下: function wetherScroll(){ var startX = startY = endX =endY =0; var body=d ...
实现手机端的触屏滑动效果
实现代码如下: HTML <div class="x-roll-top"><div class="x-roll"><div cla ...
html手机端下拉菜单代码,jQuery手机移动端下拉列表选择代码
js代码 $(function(){ $('.retrie dt a').click(function(){ var $t=$(this); if($t.hasClass('up')){ $(&quo ...

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

手机端带二级菜单滑动导航的实现相关推荐

最新文章

热门文章