ボタンを押せば画面の横からメニューがスライドして現れるドロワーメニュー。facebookを先駆けに、最近のスマホサイトやアプリなどで当たり前のように見るようになりましたね。
デザイン的にカッコイイだけでなく、スマホなどの小さい画面でも、上手く情報を詰め込むことができるので、ユーザビリティの面でも必須の機能といえるでしょう。
この記事では、ドロワーメニューを設置する手順を紹介しますが、プラグインを使わない自作する方法で解説したいと思います。
ドロワーメニューの作成手順
まず、ドロワーメニューを作るために必要な言語はHTMLとCSSとjQeryの３つ。
仕組みとしては、HTMLで作ったドロワーメニューを、CSSで隠れている状態と表示した状態を作成し、jQeryでその切り替えをするだけという単純な作りになります。
HTMLとCSSはある程度わかるけど、jQeryはちょっと…という方もいるかと思いますが、動きを作るのはCSSが主になるので、jQeryは必要最低限しか使いませんので安心してください。
一応、完成したイメージとしては当ブログの左上にあるドロワーメニューになります。※スマホやタブレットでしか表示しない設定にしています。
それでは手順を見ていきましょう。
HTMLを記入
ドロワーメニューの骨格を作るためにHTMLをサイト内に書いていきます。
<div class="drawer">
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>
<div class="drbtn">
<span class="hambarg"></span>
<span class="hambarg"></span>
<span class="hambarg"></span>
<span>MENU</span>
</div><!--drbtn-->
</div><!--drawer-->
<div class=”drawer”></div>で囲った全部がスライドして出てくるドロワーメニューの部分になります。
そして<div class=”drbtn”></div>はタップするためのボタンの部分で、その中にある３つ並んだ<span class=”hambarg”></span>が通称ハンバーガーといわれる３本線になります。
4つ目の<span>MENU</span>はハンバーガーメニューだけだとわかりにくいという事もあるので、補足としてテキストを入れています。
CSSを記入
Close時のCSS
次に、HTMLコードにCSSでデザインしていくのですが、まずドロワーメニューがCloseしている状態から書いていきたいと思います。
//ドロワーメニューのClose時のスタイルシート
.drawer {
position:fixed;
top:0;
left:0;
width: 300px;
height: 100%;
background: #fff;
padding: 50px 10px;
-webkit-transform: translateX(-300px);
transform: translateX(-300px);
-webkit-transition:ease .5s;
transition:ease .5s;
z-index:9999;
}
上から重要な所だけをみていくと、widthとheightでドロワーメニューのサイズを指定しています。
Widthは横幅なのですが、スマホ画面の横幅が小さいものであれば380pxということもあって、それよりも小さい300pxにしています。heightはスマホ画面いっぱいに表示したいので100％に指定。
そして、Close時に左側へドロワーメニューを隠すために-transformをtranslateX（-300px）に指定しています。滑らかな動きはtransitionを使っています。
タップするボタンの部分は以下のように書きました。
//ドロワーメニューの開閉ボタン
.drbtn {
position: fixed;
top:0;
right: -50px;
width: 50px;
height: 50px;
-webkit-transition:ease .5s;
transition:ease .5s;
cursor:pointer;
align-items: flex-end;
display: flex;
justify-content: center;
font-size: 10px;
padding-bottom: 2px;
z-index: 10000;
}
positionはfixedにして絶対値を指定。top:0で一番上にして、right: -50pxで、ドロワーメニューがCloseしている時でも見えるようにしています。
こちらにも滑らかな動きをつけるためにtransitionを使用。
align-items:flex-end、display: flex、justify-content: centerは、<span>MENU</span>の部分をボタン内の中央下に設置するために書いています。
中身の三本線ハンバーガーはこんな感じです。↓
//ハンバーガーボタンを作るスタイルシート
.hambarg {
position: absolute;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
height: 2px;
width: 30px;
background: #5c6b80;
-webkit-transition: ease .5s;
transition: ease .5s;
}
.hambarg:nth-child(1) {
top: 20%;
left: 50%;
}
.hambarg:nth-child(2) {
top: 40%;
left: 50%;
}
.hambarg:nth-child(3) {
top: 60%;
left: 50%;
}
Open時のCSS
それでは次にドロワーメニューがOpenしている時のCSSを書いていきます。
//ドロワーメニューをOPENにするスタイルシート
.drawer.action {
-webkit-transform:translateX(0);
transform:translateX(0);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
//ボタンをドロワーメニュー内に表示
.drbtn.action {
right: 0;
}
//ハンバーガーボタンを"×"に変える
.drbtn.action {
.hambarg:nth-child(1) {
top: 50%;
-webkit-transform: translate(-50%,-50%) rotate(45deg);
transform: translate(-50%,-50%) rotate(45deg);
}
.hambarg:nth-child(2) {
top: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
opacity: 0;
}
.hambarg:nth-child(3) {
top: 50%;
-webkit-transform: translate(-50%,-50%) rotate(-45deg);
transform: translate(-50%,-50%) rotate(-45deg);
}
}
先ほどClose時でtransformを-300pxにしてドロワーメニューを画面左に隠していましたが、ここでは値を0にして隠れていたドロワーメニューを表示するようにしています。
それからドロワーメニューのリストが多い場合でも縦スクロールできるようにoverflow-yをautoに指定。ボタン部分はOpen時にメニュー内側に表示するようにright: 0にしています。
CSSはこれで完成です。
jQeryを記入
最後にjQeryを実装していくのですが、まず以下のコードを<html>～</html>間に記入して、jQeryのライブラリー本体を読み込んでください。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
jQeryを読み込む準備ができたら、次にコードを書いていきます。
慣れていない人にとって難しいと感じるかもしれませんが、冒頭でも言った通りCSSがメインなのでjQeryのコードはとても簡単。
↓書くのは以下のコードだけです。これを</body>の直前に書いてください。
$(function() {
$('.drbtn').on('click', function () {
$(this).toggleClass('action');
$('.drawer').toggleClass('action');
});
});
内容を簡単に説明すると、.drbtnボタンをクリックしたら、.drbtnと.drawerに.actionというClassを付与してドロワーメニューをOpen。
そしてもう一度クリックすると.actionを取り除き、ドロワーメニューをCloseするというコードになっています。
先ほどのOpen時とClose時のCSSを確認していただくとわかりますが、Open時に.actionが付与したCSSが適用され、transformで動かすというだけのシンプルな作りになります。
以上のコードをすべて書けばドロワーメニューの完成です。
最後に
WordPressのプラグインを使わずに作る方法ということで書きましたが、案外簡単だったのではないでしょうか。
確かにプラグインを使った方がいろんな機能が付いているので、初心者の方は使いやすいかもしれませんが、その反面サイトが重くなったり、カスタマイズしにくいというデメリットがあります。
なので、もし自分には最低限の機能しかいらない、シンプルなデザインで良いというのであれば、ドロワーメニューを自作することをオススメします。
勉強にもなるので、ぜひ挑戦してみてくださいね。
jQuery学ぶならコレ↓
