MIGO TOP
WEB
コーディング
スマホに最適！ドロワーメニューの作り方～MIGOブログのメニュー設置手順～

スマホに最適！ドロワーメニューの作り方～MIGOブログのメニュー設置手順～

2015年7月12日コーディング

スマートフォンに多い「ドロワーメニュー」

プラグイン等は使わずに、簡単なJSを書いて設置する方法をご紹介します。

実際にこのブログに設置しているドロワーメニューをそのまま載せます。ご利用の際はCSS等アレンジしてみてください。

スクリプトを設置

JQueryを読み込みます。

本体をダウンロードして使うのならこんな感じで

googleがホストしているものを読み込むなら下記を書きます。

JQueryの読み込み方はこちら

続けてJSを記載します。

当ブログではfooterに設置しました。
bodyタグの閉じる直前なんかが、よろしいかと。

$(function($) {
    WindowHeight = $(window).height();
    $('.drawr').css('height', WindowHeight); //メニューをWindowの高さいっぱいにする
    $(document).ready(function() {
        $('.op-cl').click(function(){ //クリックしたら
            $('.drawr').animate({width:'toggle'}); //animateで表示・非表示
        });
    });
});

このブログはワードプレスで運営しているのですが、ここで気をつけるポイントがあります。
ワードプレスは上記のようなスクリプトを書く際に、「$」では読み込むことができません。最初の「$」を「jQuery」に変更して、下記のように書き直しましょう。

jQuery(function($) {
    WindowHeight = $(window).height();
    $('.drawr').css('height', WindowHeight); //メニューをWindowの高さいっぱいにする
    $(document).ready(function() {
        $('.op-cl').click(function(){ //クリックしたら
            $('.drawr').animate({width:'toggle'}); //animateで表示・非表示
        });
    });
});

HTMLとCSSを設置

ボタンを画面の右上に設置。
ドロワーメニューが画面右から現れるパターンです。

HTML

メニューを開くアイコン

 メニューを閉じるアイコン
  
   MENU1
   MENU2
   MENU3
   MENU4
   MENU5

CSSはこんな感じにしています。

.drawr-bt {
    display: block;
    width:35px;
    height: 35px;
    position: fixed;
    top:20px;
    right:20px;
    cursor: pointer;
    z-index: 7777;
}
//右上に固定でメニューボタンを設置

.drawr {
    display: none;
    background-color:rgba(255,255,255,1);
    position: fixed;
    top: 0px;
    right:0;
    width:220px;
    padding:0px 0 20px 0px;
    z-index: 8888;
    box-shadow: 0 0 4px #ccc;
}
//右から出てくるメニューボックス。こちらもfixed。z-indexでメニューボタンの上に持ってきましょう。

#d-menu li {
    width:220px;
    list-style: none;
    box-shadow: 0 1px 2px #ccc;
}
//マテリアルデザインにハマっているのでカード風にシャドウを

#d-menu li a {
    color:#1a1a1a;
    display: block;
    padding: 15px;
    background: #f7f9fb none repeat scroll 0 0;
    font-size: 16px;
    margin-bottom: 10px;
  　transition-duration: .3s;
}
//リンクをブロック要素にして背景色を

#d-menu li a:hover{
  	transition-duration: .3s;
  	background: #1095b6;
  	color:#fff; 
}
//hoverで色が変わるよ！transitionでゆっくりとね！

.close-bt{
    display: block;
    width:39px;
    height: 39px;
    line-height: 39px;
    cursor: pointer;
    z-index: 9999;
    font-size: 39px;
    padding: 6px;
    margin-bottom: 10px;
    background:#f7f9fb;
    box-shadow: 0 1px 2px #ccc;
    text-align: center;
}
//閉じるボタンを設置。z-indexを最強にしておかないと隠れちゃいます。

メニューを「開く」のボタンは画像で作っても良いですが、今回は下記WEBフォント使いました。
「閉じる」は普通に全角の「×」です。
そのためfont-size等の指定がありますが、画像を用意するのであれば不要です。

Font Awesome
hoverで色変えれたり、解像度損なわないのでPCスマホ関係なく綺麗に表示されるので。

いかがでしょうか？

ドロワー自体難しいものではないので、ネット上ではサンプルが溢れているかと思いますが、このブログのCSS等も含めてそのまま書いているので参考になれば幸いです(/・ω・)/