こんにちは、制作担当の奥田です。
今やレスポンシブウェブデザインや、スマホ制作には欠かせない、ドロワーナビ。
jQueryのプラグインも豊富に存在しますが、DEMOのソースと環境を揃えてあげないといけなかったり、ちょこちょこ修正が必要だったりと、意外と面倒です。
実は特に難しい事はせずに、数行のjQueryコードとCSSで実装可能なのです。
今回はプラグインを使わずに作るドロワーナビをご紹介いたします。
Table of contents
コンテンツとナビゲーションを用意
まずはコンテンツとナビゲーションを用意します。
固定ヘッダーとコンテンツ、そしてリスト型のナビゲーションを用意し、#drawernavとします。
<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クラスを付与し、開いた状態を作成します。
/**
* ドロワー開放時のスタイル
**/
@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で制御します。
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);を指定すると回避できます。