質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

866閲覧

swiper.jsのSlideable Navigation Drawer の応用について

sanpin_tea

総合スコア15

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2018/11/06 09:03

編集2018/11/07 06:41

前提・実現したいこと

ハンバーガーメニューを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">
```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>

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>
```js
<!-- 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> ### 試したこと デモのhtmlに記述されているstyleの中の.menuのmax-width: 320px;分がハンバーガーメニューをクリックすることにより左右に動いてメニューが表示されたり消えたりするので、メニューの位置指定を変更することで解決したいと思ったのですが、htmlに記述されているstyleのcssとswiper.cssとswiper.jsの関係ありそうなところを探しても、どの部分が作用して動いているのかが分かりませんでした。 ### 最後に 書いてあるコードを部分的に修正してswiperなどをこれまでも使用してきましたが、素人に近いので自分自身でコードを書いたりは出来ないです。それでも少しずつ勉強もしていきたいと思っています。 よろしくお願い致します。 ### 補足情報(FW/ツールのバージョンなど) 環境:Windows10、swiper-3.4.2 demo32-slideable-menu

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/11/06 15:12

(質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
sanpin_tea

2018/11/08 08:11

ご指摘ありがとうございました。
guest

回答1

0

ベストアンサー

最初に結論を言ってしまうと、これはスライダーでメニューも作れるというデモだと思いますが、右に持ってくるのはお勧めしません。右にしたいならメニュー専用のライブラリを探したほうがいいでしょう。

さて、スライダーなので、左右逆にすればいいだろうとHTMLを次のように書いてみます。

HTML

1 <div class="swiper-container"> 2 <div class="swiper-wrapper"> 3 <div class="swiper-slide content"> 4 <div class="menu-button"> 5 <div class="bar"></div> 6 <div class="bar"></div> 7 <div class="bar"></div> 8 </div> 9 Content slide 10 </div> 11 <div class="swiper-slide menu">Menu slide</div> 12 </div> 13 </div>

CSS

1.menu-button { 2 position: absolute; 3 top: 0px; /*left: 0px;*/ 4 right: 0; 5 /* 以下略 */ 6} 7

しかし、これでメニューを開いてもSwiper内で管理しているindexが変わらないため処理できなくなってしまうようです。
このため、indexを自分で管理することになります。

jQuery

1 var index = 0; 2 var swiper = new Swiper('.swiper-container', { 3 slidesPerView: 'auto', 4 initialSlide: 0 5 }); 6 $('.content').on('click', function(event) { 7 var target = $(event.target); 8 if (!target.closest('.menu-button').length && index !== 1) { 9 return true; 10 } 11 12 if (index === 0) { 13 swiper.slideNext(); 14 $('.menu-button').addClass('cross'); 15 } else { 16 swiper.slidePrev(); 17 $('.menu-button').removeClass('cross'); 18 } 19 20 index = 1 - index; 21 });

ほとんどのオプションが使えなくなり、イベントも自分で管理するならわざわざこれを使う意味はほとんどないでしょう。

投稿2018/11/08 04:27

編集2018/11/08 04:30
x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2018/11/08 04:32

なお、質問者のバージョンに合わせ3.4.2で確認したものですので、4ならうまくいくという可能性もあります。調べていません
sanpin_tea

2018/11/08 08:13

ありがとうございます。 記述して頂いたものでまずは試してみます。 またメニュー専用の他のライブラリも検討してみます。
sanpin_tea

2018/11/14 07:35

ご回答頂きました通りに記述し、求めていた動きを実現することが出来ました。 ありがとうございました。 ご指摘頂きました点に関してはその通りなので、メニュー専用のライブラリも今後検討していきたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問