前提・実現したいこと
ハンバーガーメニューをswiper-3.4.2 を使用して作成したいです。
PCからスマホまで対応させたいです。
デモフォルダ内のdemo32-slideable-menu(以下デモページ参照)はデフォルトでは左上にハンバーガーメニューがあり、クリックすると左から右にメニューがスライドし表示するようになっています。
今回はハンバーガーボタンを右上に配置し、クリックすると右から左にメニューがスライドするようにしたいです。
デモのhtmlに記述されているstyleとswiper.cssとswiper.jsを確認し、色々試したのですが解決することが出来ませんでした。
デモページ(Slideable Navigation Drawer) https://idangero.us/swiper/demos/430-slideable-menu.html
該当のソースコード
swiper-3.4.2 demo32-slideable-menuから以下をそのまま持ってきております。
<!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">
</head> <body>```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>
html
1<!-- Swiper --> 2 <div class="swiper-container"> 3 <div class="swiper-wrapper"> 4 <div class="swiper-slide menu">Menu slide</div> 5 <div class="swiper-slide content"> 6 <div class="menu-button"> 7 <div class="bar"></div> 8 <div class="bar"></div> 9 <div class="bar"></div> 10 </div> 11 Content slide 12 </div> 13 </div> 14 </div>
<!-- Swiper JS --> <script src="../dist/js/swiper.min.js"></script>
<!-- Initialize Swiper -->```js
<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> ### 試したこと デモのhtmlに記述されているstyleの中の.menuのmax-width: 320px;分がハンバーガーメニューをクリックすることにより左右に動いてメニューが表示されたり消えたりするので、メニューの位置指定を変更することで解決したいと思ったのですが、htmlに記述されているstyleのcssとswiper.cssとswiper.jsの関係ありそうなところを探しても、どの部分が作用して動いているのかが分かりませんでした。 ### 最後に 書いてあるコードを部分的に修正してswiperなどをこれまでも使用してきましたが、素人に近いので自分自身でコードを書いたりは出来ないです。それでも少しずつ勉強もしていきたいと思っています。 よろしくお願い致します。 ### 補足情報(FW/ツールのバージョンなど) 環境:Windows10、swiper-3.4.2 demo32-slideable-menu
回答1件
あなたの回答
tips
プレビュー