スマホに最適!ドロワーメニューの作り方~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
メニューを開くアイコンメニューを閉じるアイコン
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等も含めてそのまま書いているので参考になれば幸いです(/・ω・)/