`

Swiper滑动菜单Demo

阅读更多

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 DEMO

    在"Swiper-3.0.6"的DEMO中,你可能会看到各种应用场景,例如产品展示、幻灯片、菜单导航等,通过查看和分析这些DEMO,开发者可以更好地理解和掌握如何在自己的项目中应用Swiper,实现各种酷炫的滑动效果。同时,DEMO...

    Swiper-master的Demo

    Swiper 是一款流行的开源JavaScript库,常用于创建滑动效果,如轮播图、产品滑块、导航菜单等。在Web开发中,它以其高性能、响应式和易于定制的特性而受到广泛欢迎。"Swiper-master"是Swiper库的一个版本,其中包含...

    muidemo整理测试

    1. **组件使用**:MUI的组件设计遵循原生APP的交互习惯,例如,可以学习如何使用导航栏(navigator)实现页面间的跳转,如何设置侧滑菜单(slide-menu)以提供便捷的二级导航,以及如何利用轮播图(swiper)展示动态...

    仿微信6.0左右滑动渐变切换效果[大陆第一人]

    介绍:BottomMenuSlideGradientSwipe是一个仿微信6.0左右滑动渐变切换效果的demo,特分享与大家探讨 [目前上面只有一个自己写的自定义AlertDialog对话框,有兴趣的朋友可以看一下,当然肯定没得前段时间出来的那个...

    基于reactnative实现的类似探探的左右划屏交互DrawerAPP开发原型开箱即用

    在React Native中,我们可以利用`react-native-swiper`库来创建滑动卡片效果,或者自定义触摸事件来控制卡片的切换。 在项目结构中,你可能会看到以下关键文件: 1. `App.js`:这是应用的入口文件,通常包含根组件...

    framework7 demo

    3. **面板**:左右滑动可显示隐藏的侧边栏,通常用作导航菜单或工具栏。 4. **弹出框(Popups)**:包括模态框、警报对话框、确认对话框等,用于显示临时信息或用户交互。 5. **滑块(Swiper)**:内置的滑动组件,...

    Demo分析学习《三》破车:音乐播放,循环,上首/下首,菜单

    亮点一、使用swiper组件,制作了一个顶部的tabBar,效果很不错,可以左右滑动切换整个页面,之前一直没想到swiper组件可以滑动整个页面。。唯一感觉不足,页面切换的时候标题头下的横线没有动画移动效果,下面平滑...

    微信小程序实用demo:微信小程序swiper个性化定制:适用1221

    2016.11.10日新增,tabs切换,点击菜单切换,滑动切换。   --------------------------------------------------------------------------------------------------------------------- 微信小程

    底部菜单加一个滚动广告条

    描述中提到,“在别人的DEMO上修改完善的”,意味着开发者可能借鉴了现有的开源项目或示例代码,并对其进行了一些定制化改造,以适应自己的需求。“底部tabhost菜单”进一步强调了应用的界面设计,即底部有一个...

    6个Web前端极其精美的触摸效果组件(一)

    在实际应用中,可以用来创建动态侧边栏菜单或者内容展示区域。 2. **触摸滑动轮播(Touch-Swipe Carousel)** 滑动轮播组件允许用户通过手指滑动来浏览一系列图像或内容。这种组件通常包含自动播放、导航箭头和指示...

    vue+web端仿微信网页版聊天室功能

    7. **Swiper**:Swiper 是一款流行的滑动特效库,可能在聊天室中用于创建滑动效果,如表情包或图片轮播。 8. **Node.js**:Node.js 作为后端环境,处理服务器端逻辑,可能包括用户认证、消息推送、文件上传等。 9....

Global site tag (gtag.js) - Google Analytics