http://ch.dlsite.com/matome
こちらのサイトにあるハンバーガーメニューと同じものを作成したいのですが、どうやって動いているのかが全くわかりません。
未熟者なりにインスペクターでコードを追いかけてみたところ、vue.jsという割と新しいjsのフレームワークを使用しているのかな?というところまでしか分かりませんでした。
回答者様には、このハンバーガーメニューがどのように動いているのか教えて頂きたいです。
宜しくお願い致します。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答1件
0
ベストアンサー
ハンバーガーメニューの動きだけで回答させて頂きますと、
メニューをオープンするボタンで対象要素に[is-opened]クラスをつけ、後はそれに対するcssにてアニメーションさせているようです。
★例えばメニューが左からスライドして出てくる部分は
初めは
.global-menu-container .global-menu-inner {
-webkit-transform: translateX(-240px); -ms-transform: translateX(-240px); transform: translateX(-240px); transition: all .2s ease-out;
}
のtransformにて、初期位置から左に-240px ずらしています。
アニメーションさせるプロパティはすべて(all) アニメーション時間は0.2秒に設定されています。
is-openedクラスがついた際は以下のcssが設定されていて
.global-menu-container.is-opened .global-menu-inner {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
とすることで、初期位置(0)に0.2秒かけてアニメーションしてもどります。
★簡易的に同じように動くものをササっとつくってみましたので、よろしければ以下のコードでご確認ください。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> </head> <body> <style> .global-menu-container { top: 0; z-index: 160; width: 100vw; height: 100vh; font-size: 1.3rem; transition: all .2s ease-out; } .global-menu-container.is-opened { visibility: visible; opacity: 1; background: rgba(0,0,0,.7); } .ct-overlay, .global-menu-container { visibility: hidden; position: fixed; left: 0; opacity:0; } .global-menu-container .global-menu-inner { opacity: 0; -webkit-transform: translateX(-240px); -ms-transform: translateX(-240px); transform: translateX(-240px); width: 240px; min-height: 100%; background: #fff; -webkit-transition: all .2s ease-out; transition: all .2s ease-out; } .global-menu-container.is-opened .global-menu-inner { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } </style> <div class="global-menu-container"> <div class="global-menu-inner"> <a class="tozimasu" onClick="toziro();">とじます</a> </div> </div> <div class="botan"> <p class="openBtn" onClick="hirake();">ひらきます</p> </div> <script> function hirake(){ var element = document.querySelector('.global-menu-container'); element.classList.toggle('is-opened'); }; function toziro(){ var element = document.querySelector('.global-menu-container'); element.classList.toggle('is-opened'); }; </script> </body> </html>
★追記 スクロール制限の件
■ハンバーガーメニューを開いた際、コンテンツ部分をスクロールさせない件は、いくつか方法があると思いますが、ご紹介してくださったサイトと同じような方法を説明させていただきます。
●概要
・メニューが開く瞬間ささっとbody をposition:fixedで固定し、スクロールしたぶん[top]プロパティでスルッと上に動かします。positionが固定されたので、コンテンツ部分はスクロールできません。
・スクロールさせたい部分(メニュー)はoverflow-y:auto を設定することでスクロールできるようにしておきます。
・メニューが閉じる時にbody からposition:fixedを外して普通にスクロールできるようにします。
・ヘッダー部分は普通に position:fixed で固定しました。
具体的には下記コードでご確認いただければと思います。(下部のスクリプト部分がご参考になるかと思います。)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> </head> <body> <style> body, html { height: 100%; } .global-menu-container { top: 0; z-index: 160; width: 100vw; height: 100vh; font-size: 1.3rem; transition: all .2s ease-out; } .global-menu-container.is-opened { visibility: visible; opacity: 1; background: rgba(0,0,0,.7); } .ct-overlay, .global-menu-container { visibility: hidden; position: fixed; left: 0; opacity:0; } .global-menu-container{ overflow-y:auto; } .global-menu-container .global-menu-inner { opacity: 0; -webkit-transform: translateX(-240px); -ms-transform: translateX(-240px); transform: translateX(-240px); width: 240px; min-height: 100%; background: #fff; -webkit-transition: all .2s ease-out; transition: all .2s ease-out; } .global-menu-container.is-opened .global-menu-inner { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .scrollers p{ padding-bottom:150px; } header{ padding-bottom:60px; } .header-fixer{ height:60px; position:fixed; z-index:100; top:0; left:0; width:100%; background:white; border-bottom:1px solid black; } .bodyOTomeru{ position:fixed; left:0; } nav ul li{ padding-bottom:100px; } </style> <div class="global-menu-container"> <div class="global-menu-inner"> <a class="tozimasu" onClick="toziro();">とじます</a> <nav> <ul> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> </ul> </nav> </div> </div> <header class="botan"> <div class="header-fixer"> <p class="openBtn" onClick="hirake();">ひらきます</p> </div> </header> <div class="scrollers"> <p>スクロオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオル</p> <p>スクロオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオル</p> <p>スクロオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオル</p> <p>スクロオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオル</p> <p>スクロオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオル</p> <p>スクロオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオル</p> <p>スクロオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオル</p> <p>スクロオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオル</p> <p>スクロオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオル</p> <p>スクロオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオル</p> <p>スクロオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオル</p> <p>スクロオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオル</p> </div> <script> var scrolls function hirake(){ //bodyがどれだけスクロールしたか取得 scrolls = document.body.scrollTop; var element = document.querySelector('.global-menu-container'); element.classList.toggle('is-opened'); //bodyをposition:fixed する document.body.classList.add('bodyOTomeru'); //スクロールした分bodyを上にずらす document.body.style.top = -scrolls+"px"; }; function toziro(){ var element = document.querySelector('.global-menu-container'); element.classList.toggle('is-opened'); //body からposition:fixed をはずす document.body.classList.remove('bodyOTomeru'); //スクロールした分、スクロールさせる document.body.scrollTop = scrolls; }; </script> </body> </html>
投稿2017/05/12 01:43
編集2017/05/12 03:42退会済みユーザー
総合スコア0
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/12 02:00
退会済みユーザー
2017/05/12 03:42