Blog スタッフブログ

プラグインを使わずにCSSとjQuery数行でできるドロワーナビ

Category | Blog
/ 17,587views

e8e8a411c51e64a4f275915f4c4d11bc

こんにちは、制作担当の奥田です。

今やレスポンシブウェブデザインや、スマホ制作には欠かせない、ドロワーナビ。
jQueryのプラグインも豊富に存在しますが、DEMOのソースと環境を揃えてあげないといけなかったり、ちょこちょこ修正が必要だったりと、意外と面倒です。

実は特に難しい事はせずに、数行のjQueryコードとCSSで実装可能なのです。
今回はプラグインを使わずに作るドロワーナビをご紹介いたします。

Table of contents

  1. コンテンツとナビゲーションを用意
  2. 開いている状態を作成する
  3. jQueryで制御する

コンテンツとナビゲーションを用意

まずはコンテンツとナビゲーションを用意します。
固定ヘッダーとコンテンツ、そしてリスト型のナビゲーションを用意し、#drawernavとします。

DEMO.コンテンツとナビゲーションを用意

<div id="page">
    <!-- コンテンツ -->
    <div id="overlay" class="hidden-md hidden-lg"></div>
</div><!-- #page -->
<div id="humberger" class="hidden-md hidden-lg">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</div>
<div id="drawernav" class="hidden-md hidden-lg">
    <!-- ドロワーナビ -->
</div>
#drawernav{
    position: fixed;
    top: 0;
    right: -240px;
    width: 240px;
    height: 100%;
    background: #333;
    color: #fff;
    z-index: 1;
    padding-top: 40px;
    -webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
       -moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
         -o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
            transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */

    -webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
       -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
         -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
            transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
}

ドロワーナビの幅を240pxにしています。
こちらは好きなサイズでも構いませんが、最少幅が320pxのスマホを考慮し240pxとしています。

イメージとしては、閉じている状態ではドロワーナビはウインドウ右端に隠れていて、開くと#pageと#drawer-navが左に240px動くというイメージです。

開いている状態を作成する

ドロワーナビの開閉はjQueryを使用しますが、アニメーションはCSS3で記述するので、
やることは単純にbodyにdrawer-openedクラスを付与したり、外したりということのみです。
なのでbodyにdrawer-openedクラスを付与し、開いた状態を作成します。

DEMO.開いた状態を作成

/**
* ドロワー開放時のスタイル
**/
@media(max-width: 991px){
    body.drawer-opened #page{
        left: -240px;
        box-shadow: 1px 0 2px #000;
        -webkit-box-shadow: 1px 0 2px #000;
    }
    body.drawer-opened .fixed-content{
        left: -240px;
    }
    body.drawer-opened #drawernav{
        right: 0;
    }
    body.drawer-opened #humberger .icon-bar{
        background: #fff;
    }
    body.drawer-opened #humberger :nth-child(1){
        transform:translate(0,8px) rotate(45deg);
        -webkit-transform:translate(0,8px) rotate(45deg);
    }
    body.drawer-opened #humberger :nth-child(2){
        transform:translate(-20px ,0);
        -webkit-transform:translate(-20px ,0);
        opacity:0;
    }
    body.drawer-opened #humberger :nth-child(3){
        transform:translate(0,-8px) rotate(-45deg);
        -webkit-transform:translate(0,-8px) rotate(-45deg);
    }
    body.drawer-opened #overlay{
        z-index: 3;
        opacity: 0.3;
        left: -240px;
    }
}

ハンバーガーボタンはCSS3のtransformでXボタンになるようにしています。

jQueryで制御する

最後にjQueryで制御します。

DEMO.jQueryで制御する

touchstartとclickイベント両方にバインドしている理由は一部スマートフォンでtouchstartに対応していない端末があるからです。
touchstartイベントはclickイベントより前に発火するため、touchstartで開閉した際に変数touchにtrueを入れ、変数touchがtrueならclickイベント時は開閉しないようにしています。
そして、#overlay側をタッチした際にドロワーナビが閉じるようにしています。

;(function($){
    var touch = false;
    $('#humberger').on('click touchstart',function(e){
        switch (e.type) {
            case 'touchstart':
                drawerToggle();
                touch = true;
                return false;
            break;
            case 'click':
                if(!touch)
                     drawerToggle();
                return false;
            break;
         }
        function drawerToggle(){
            $('body').toggleClass('drawer-opened');
            touch = false;
        }
    })
    $('#overlay').on('click touchstart',function(){
        $('body').removeClass('drawer-opened');
    })
})(jQuery);

これだけのわずか数行のコードでドロワーナビが実装できます。
ぜひ、スマホ制作やレスポンシブウェブデザイン制作時に活用してみてください。

※Chromeの一部バージョンでposition:fixed;に対するバグがあり、カクつくことがある場合は、-webkit-transform:translateZ(0);を指定すると回避できます。

Category | Blog
Author | Mineo Okuda / 17,587views

Company information

〒651-0087
神戸市中央区御幸通 8-1-6 神戸国際会館 22F

Contact us

WEBに関するお問い合わせは
078-570-5755 (10:00 - 18:00)