このサイトのハンバーガーメニューと同じものを作りたいのですが...

http://ch.dlsite.com/matome
こちらのサイトにあるハンバーガーメニューと同じものを作成したいのですが、どうやって動いているのかが全くわかりません。
未熟者なりにインスペクターでコードを追いかけてみたところ、vue.jsという割と新しいjsのフレームワークを使用しているのかな？というところまでしか分かりませんでした。

回答者様には、このハンバーガーメニューがどのように動いているのか教えて頂きたいです。
宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

ハンバーガーメニューの動きだけで回答させて頂きますと、
メニューをオープンするボタンで対象要素に[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