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 ...
随机推荐
- 腾讯首页分辨手机端与pc端代码
腾讯首页分辨手机端与pc端代码 自己在做网页的时候在腾讯网首页借鉴的代码. 代码: <!-- 移动适配JS脚本 --> <script type="text/javascr ...
- Java实现系统目录实时监听更新。
SDK1.7新增的nio WatchService能完美解决这个问题.美中不足是如果部署在window系统下会出现莫名其妙的文件夹占用异常导致子目录监听失效,linux下则完美运行.这个问题着实让人头 ...
- 12 Django组件-forms组件
forms组件 校验字段功能 针对一个实例:注册用户讲解. 模型:models.py class UserInfo(models.Model): name=models.CharField(max_l ...
- 51Nod 1680 区间求和 树状数组
题意: 给出一个长度为\(n\)的数列\(A_i\),定义\(f(k)\)为所有长度大于等于\(k\)的子区间中前\(k\)大数之和的和. 求\(\sum_{k=1}^{n}f(k) \; mod \ ...
- 数据库路由中间件MyCat - 源代码篇（2）
此文已由作者张镐薪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 2. 前端连接建立与认证 Title:MySql连接建立以及认证过程client->MySql:1.T ...
- 【Dual Support Vector Machine】林轩田机器学习技法
这节课内容介绍了SVM的核心. 首先,既然SVM都可以转化为二次规划问题了,为啥还有有Dual啥的呢?原因如下: 如果x进行non-linear transform后,二次规划算法需要面对的是d`+1 ...
- appium-手势密码实现-automationName 是Appium的情况
1. 红色区域的范围为:[66,575][1014,1523], 由于这块是一个整块,所以无法使用每个点的数据:因此只能使用LockPatternView对象拿到左上角的坐标值 2. 原理, 将九宫 ...
- 孤荷凌寒自学python第三十五天python的文件操作之针对文件操作的os模块的相关内容
孤荷凌寒自学python第三十五天python的文件操作之针对文件操作的os模块的相关内容 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) 一.打开文件后,要务必记得关闭,所以一般的写法应当 ...
- [类和对象]4 C++ static & friend
1.静态成员变量和成员函数 思考:每个变量,拥有属性.有没有一些属性,归所有对象拥有? 1.1 静态成员变量 1)定义静态成员变量 关键字 static 可以用于说明一个类的成员 静态成员提供了一个 ...
- KMP与循环节相关题目
HDU 3746 Cyclic Nacklace ( KMP求最小循环节 ) len - nextval[len]即为最小循环节长度. #include <cstdio> #include ...