swiper伸缩侧边菜单栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <!-- Link Swiper's CSS -->
<link rel="stylesheet" href="../dist/css/swiper.min.css"> <!-- Demo styles -->
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff; /* 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;
}
.menu {
min-width: 100px;
width: 70%;
max-width: 320px; background-color: #2C8DFB;
color: #fff;
}
.content {
width: 100%;
} .menu-button {
position: absolute;
top: 0px; left: 0px; padding: 15px; cursor: pointer; -webkit-transition: .3s;
transition: .3s; background-color: #2C8DFB; /*margin: 14px;
border-radius: 5px;*/
}
.menu-button .bar:nth-of-type(1) {
margin-top: 0px;
}
.menu-button .bar:nth-of-type(3) {
margin-bottom: 0px;
} .bar {
position: relative;
display: block; width: 50px;
height: 5px; margin: 10px auto;
background-color: #fff; border-radius: 10px; -webkit-transition: .3s;
transition: .3s;
} .menu-button:hover .bar:nth-of-type(1) {
-webkit-transform: translateY(1.5px) rotate(-4.5deg);
-ms-transform: translateY(1.5px) rotate(-4.5deg);
transform: translateY(1.5px) rotate(-4.5deg);
}
.menu-button:hover .bar:nth-of-type(2) {
opacity: .9;
}
.menu-button:hover .bar:nth-of-type(3) {
-webkit-transform: translateY(-1.5px) rotate(4.5deg);
-ms-transform: translateY(-1.5px) rotate(4.5deg);
transform: translateY(-1.5px) rotate(4.5deg);
} .cross .bar:nth-of-type(1) {
-webkit-transform: translateY(15px) rotate(-45deg);
-ms-transform: translateY(15px) rotate(-45deg);
transform: translateY(15px) rotate(-45deg);
}
.cross .bar:nth-of-type(2) {
opacity: 0;
}
.cross .bar:nth-of-type(3) {
-webkit-transform: translateY(-15px) rotate(45deg);
-ms-transform: translateY(-15px) rotate(45deg);
transform: translateY(-15px) rotate(45deg);
}
.cross:hover .bar:nth-of-type(1) {
-webkit-transform: translateY(13.5px) rotate(-40.5deg);
-ms-transform: translateY(13.5px) rotate(-40.5deg);
transform: translateY(13.5px) rotate(-40.5deg);
}
.cross:hover .bar:nth-of-type(2) {
opacity: .1;
}
.cross:hover .bar:nth-of-type(3) {
-webkit-transform: translateY(-13.5px) rotate(40.5deg);
-ms-transform: translateY(-13.5px) rotate(40.5deg);
transform: translateY(-13.5px) rotate(40.5deg);
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide menu">Menu slide</div>
<div class="swiper-slide content">
<div class="menu-button">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
Content slide
</div>
</div>
</div> <!-- Swiper JS -->
<script src="../dist/js/swiper.min.js"></script> <!-- Initialize Swiper -->
<script>
var toggleMenu = function(){
if (swiper.previousIndex == 0)
swiper.slidePrev()
}
, menuButton = document.getElementsByClassName('menu-button')[0]
, swiper = new Swiper('.swiper-container', {
slidesPerView: 'auto'
, initialSlide: 1
, resistanceRatio: .00000000000001
, onSlideChangeStart: function(slider) {
if (slider.activeIndex == 0) {
menuButton.classList.add('cross')
menuButton.removeEventListener('click', toggleMenu, false)
} else
menuButton.classList.remove('cross')
}
, onSlideChangeEnd: function(slider) {
if (slider.activeIndex == 0)
menuButton.removeEventListener('click', toggleMenu, false)
else
menuButton.addEventListener('click', toggleMenu, false)
}
, slideToClickedSlide: true
})
</script>
</body>
</html>
swiper伸缩侧边菜单栏的更多相关文章
- 【转】 iOS 两种方法实现左右滑动出现侧边菜单栏 slide view
原文: http://blog.csdn.net/crayondeng/article/details/9057637 --- 关于评论中,很多网友都是需要这部分的相关源码,其实在我上传的新浪微博 ...
- iOS 两种方法实现左右滑动出现侧边菜单栏 slide view
现在很多的APP中都有slide view,左右滑动出现侧边菜单栏的功能,Weico这个应用就有. 网上有很多第三方的类库实现了这种效果,其实自己代码写的话也是很简单的,下面我将介绍两种方法实现s ...
- 用css和js实现侧边菜单栏点击和鼠标滑动特效
1点击效果: 2关键代码: css: #div{ display:inline-block; width:100px; height:150px; border-radius: 5px; blackg ...
- iview可收缩侧边菜单实现（支持二级菜单）
想用iview做一个可以伸缩的侧边菜单栏,效果如下: 1.侧边栏收缩前:可以通过点击菜单分类展开子菜单项: 2.可以让用户点击图标动态收缩菜单栏: 3.侧边栏收缩后:只显示菜单分类的图标,鼠标放置在菜 ...
- vue_shop(基于vue电商管理后台网站)
vue_shop 目录 vue_shop day01 实现登录功能 项目预开发处理 Login.vue完整代码: 处理步骤: 添加element-ui的表单组件 添加第三方字体: 添加表单验证 导入a ...
- jquery隐藏侧边栏和折叠侧边栏方法
两种效果如下所示: 隐藏侧边栏: 折叠侧边栏: 下面,分享隐藏侧边栏实现方法: 实现思路:给body切换class,通过class控制侧边栏和主体部分left 来实现效果 html部分: <di ...
- python_way day16 JQuary
python_way day16 JQuery 封装dom js代码 jQuery(1.10,1.12-兼容性好,2.0.以后放弃了ie9以下) - 封装了Dom & JavaScript 查 ...
- android侧滑菜单笔记
一.SlidingPaneLayout v4包下的控件,使用简单,功能简洁.官方文档明确说明该控件只能左侧滑动.使用如下: <android.support.v4.widget.SlidingP ...
- iOS 独立开发记录（下）
侧边菜单栏 查看Github上相关实现,一开始选择的是SlideMenuControllerSwift,后来决定更改为自定义,使用更简洁的方式. 分离 分离之前的SliderMeanControlle ...
随机推荐
- Python学习之购物车
实现功能: 程序启动,提示用户输入用户名和密码,程序读取余额文件last_salary.txt内容(文件不存在则自动创建),若文件内容为空则提示“首次登录,请输入工资”: 用户可以输入商品编号进行购买 ...
- 如何导入CSV数据 （python3.6.6区别于python2 环境）
1.python2环境下 2.python3.6.6环境下 如果用python2环境下的代码,在python3.6.6环境下编译会出现以下问题: 错误(1): SyntaxError:Missing ...
- python中的文件操作小结1
#!/usr/local/bin/python3 # -*- coding:utf-8 -*- f=open("test_1",'r',encoding="utf-8&q ...
- 霍夫直线检测 opencv
本次实验是检测图像中的直线,用到了HoughLines()和HoughLinesP()函数,其中HoughLinesP()称为累计概率霍夫变换,实验结果显示累计概率霍夫变换要比标准霍夫变换的效果好.具 ...
- [Bzoj2282]消防（二分答案+树的直径）
Description 某个国家有n个城市,这n个城市中任意两个都连通且有唯一一条路径,每条连通两个城市的道路的长度为zi(zi<=1000). 这个国家的人对火焰有超越宇宙的热情,所以这个国家 ...
- CentOS网络设置 couldn't resolve host 'mirrorlist.centos.org问题解决
在VMWare上安装好centos后,使用yum安装nodejs报错:can not resolve host 'mirritlist.centos.org', 百度上很多都说在/etc/resolv ...
- 11，flask之--WTForms
WTForms是什么? 相当于django的ModelForm. 在网页中,为了和用户进行信息交互总是不得不出现一些表单.flask设计了WTForm表单库来使flask可以更加简便地管理操作表单数据 ...
- 51Nod 1680 区间求和 树状数组
题意: 给出一个长度为\(n\)的数列\(A_i\),定义\(f(k)\)为所有长度大于等于\(k\)的子区间中前\(k\)大数之和的和. 求\(\sum_{k=1}^{n}f(k) \; mod \ ...
- 利用socket.io构建一个聊天室
利用socket.io来构建一个聊天室,输入自己的id和消息,所有的访问用户都可以看到,类似于群聊. socket.io 这里只用来做一个简单的聊天室,官网也有例子,很容易就做出来了.其实主要用的东西 ...
- Python 3基础教程1-环境安装和运行环境
本系列开始介绍Python3的基础教程,为什么要选中Python 3呢?之前呢,学Python 2,看过笨方法学Python,学了不到一个礼拜,就开始用Python写Selenium脚本.最近看到一些 ...