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 ...
随机推荐
- Windows Server 2012 搭建DHCP及远程路由访问
1.1 基础环境信息 1.2 DHCP与远程访问服务器角色安装 1.服务器管理器—>仪表板—>添加角色和功能,出现添加角色和功能向导,点击下一步 2.选择安装类型为基于角色或基 ...
- 使用命令行设置MySql编码格式
使用命令行设置MySql编码格式 1.登录mysql 2.输入 SHOW VARIABLES LIKE 'character_set_%'; 3.查看 value值是否为utf8,如果不是,则使用SE ...
- python web框架的介绍
随着互联网的兴起,web开发变得愈发的重要.Python作为当前火热的语言, 其中的web开发框架可以说是百花齐放,下面聊一聊这些框架. 一: 基于Python的代表性Web框架 Django Dja ...
- wordCount的执行流程
我们对于wordCount的这个流程,在清晰不过了,不过我们在使用spark以及hadoop本身的mapReduce的时候,我们是否理解其中的原理呢,今天我们就来介绍一下wordCount的执行原理, ...
- MySQL 5.7远程连接
将/etc/mysql/my.cnf中的bind_address那一行注释掉或修改为"bind_address=0.0.0.0": bind_address并没有在/etc/mys ...
- issubclasss/type/isinstance/callable/super
issubclass() : 方法用于判断第一个参数是否是第二个参数的子子孙孙类. 语法:issubclass(sub, super) 检查sub类是否是 super 类的派生类 class A: p ...
- 9.3centos7安装python3 以及tab补全功能
1.安装python3 1.1下载python源码包 网址:https://www.python.org/downloads/release/python-362/ 下载地址:https://www. ...
- 11.2，nginx负载均衡实验
Nginx负载均衡概述 Web服务器,直接面向用户,往往要承载大量并发请求,单台服务器难以负荷,我使用多台WEB服务器组成集群,前端使用Nginx负载均衡,将请求分散的打到我们的后端服务器集群中,实现 ...
- 关于Python、Java、C#语言的一些比较
不能说某某语言不好! 首先,千万别说某一个语言好不好,应为这样的用词是错的,我曾经在好多场合听到一些程序员说java好,.net不好这类的话. 其实语言不分好坏,只是在具体的某些领域或业务场景上不合适 ...
- 6.bootstrap 将文本内容关联一个动作（手机端导航适配）&在超小尺寸下显示，屏幕变大后消失
1.情景:这是出现在手机端导航适配的,点击文本MENU可以出现下拉的list 解决方法: 1.首先要想到,MENU只有两个状态,因此可以用checkbox实现 2.将MENU放在label标签里面,l ...