Swiper滑动菜单Demo效果展示，直接复制代码即可
<!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 menuButton = document.querySelector('.menu-button');
var swiper = new Swiper('.swiper-container', {
slidesPerView: 'auto',
initialSlide: 1,
resistanceRatio: 0,
slideToClickedSlide: true,
on: {
init: function () {
var slider = this;
menuButton.addEventListener('click', function () {
if (slider.activeIndex === 0) {
slider.slideNext();
} else {
slider.slidePrev();
}
}, true);
},
slideChange: function () {
var slider = this;
if (slider.activeIndex === 0) {
menuButton.classList.add('cross');
} else {
menuButton.classList.remove('cross');
}
},
}
});
</script>
</body>
</html>
.
相关推荐
在"Swiper-3.0.6"的DEMO中，你可能会看到各种应用场景，例如产品展示、幻灯片、菜单导航等，通过查看和分析这些DEMO，开发者可以更好地理解和掌握如何在自己的项目中应用Swiper，实现各种酷炫的滑动效果。同时，DEMO...
Swiper 是一款流行的开源JavaScript库，常用于创建滑动效果，如轮播图、产品滑块、导航菜单等。在Web开发中，它以其高性能、响应式和易于定制的特性而受到广泛欢迎。"Swiper-master"是Swiper库的一个版本，其中包含...
1. **组件使用**：MUI的组件设计遵循原生APP的交互习惯，例如，可以学习如何使用导航栏（navigator）实现页面间的跳转，如何设置侧滑菜单（slide-menu）以提供便捷的二级导航，以及如何利用轮播图（swiper）展示动态...
介绍：BottomMenuSlideGradientSwipe是一个仿微信6.0左右滑动渐变切换效果的demo，特分享与大家探讨 [目前上面只有一个自己写的自定义AlertDialog对话框，有兴趣的朋友可以看一下，当然肯定没得前段时间出来的那个...
在React Native中，我们可以利用`react-native-swiper`库来创建滑动卡片效果，或者自定义触摸事件来控制卡片的切换。 在项目结构中，你可能会看到以下关键文件： 1. `App.js`：这是应用的入口文件，通常包含根组件...
3. **面板**：左右滑动可显示隐藏的侧边栏，通常用作导航菜单或工具栏。 4. **弹出框（Popups）**：包括模态框、警报对话框、确认对话框等，用于显示临时信息或用户交互。 5. **滑块（Swiper）**：内置的滑动组件，...
亮点一、使用swiper组件，制作了一个顶部的tabBar，效果很不错，可以左右滑动切换整个页面，之前一直没想到swiper组件可以滑动整个页面。。唯一感觉不足，页面切换的时候标题头下的横线没有动画移动效果，下面平滑...
2016.11.10日新增，tabs切换，点击菜单切换，滑动切换。 --------------------------------------------------------------------------------------------------------------------- 微信小程
描述中提到，“在别人的DEMO上修改完善的”，意味着开发者可能借鉴了现有的开源项目或示例代码，并对其进行了一些定制化改造，以适应自己的需求。“底部tabhost菜单”进一步强调了应用的界面设计，即底部有一个...
在实际应用中，可以用来创建动态侧边栏菜单或者内容展示区域。 2. **触摸滑动轮播（Touch-Swipe Carousel）** 滑动轮播组件允许用户通过手指滑动来浏览一系列图像或内容。这种组件通常包含自动播放、导航箭头和指示...
7. **Swiper**：Swiper 是一款流行的滑动特效库，可能在聊天室中用于创建滑动效果，如表情包或图片轮播。 8. **Node.js**：Node.js 作为后端环境，处理服务器端逻辑，可能包括用户认证、消息推送、文件上传等。 9....