swiper伸缩侧边菜单栏
Posted Newbie_小白
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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伸缩侧边菜单栏的主要内容，如果未能解决你的问题，请参考以下文章