【jQuery】スマートフォンサイトで使える！上からヌルッと出てくるドロワーメニューの実装方法

2015.10.27

ドロワーメニュー

　近年ではスマートフォンサイト制作も必要条件となってきていますが、そんな時に考える必要があるのがサイトのメニューの実装になります。HTML&CSSで簡易的なメニューを実装するのもよいのですが、スマートフォンサイトっぽくjQueryでヌルッとボタンを押したら現れるようなメニューを実装するのもありかと思います。

　そこで今回は、当サイトでも実装している上からヌルッと現れるドロワーメニューの実装方法について紹介したいと思います！

1 1. 見本とjQueryプラグインをサイトでダウンロード
2 2. サイトにjQueryを実装してみよう！
3 3. ドロワーメニューのデザインを設定する
4 まとめ

1. 見本とjQueryプラグインをサイトでダウンロード

　まず、以下のようにドロワーメニューを実装したいと思います。
(ブラウザ幅を480px以下にするとドロワーメニューが表示されます)
見本ページ

　上の見本ページのようなドロワーメニューを使うには、以下のサイトからjQueryプラグインをダウンロードします！
(WordPressのプラグインもありますので、ご自身の条件に合ったものをダウンロードしてください)
MeanMenu

2. サイトにjQueryを実装してみよう！

　続いて、実際にjQueryを実装してみましょう！
今回はHTMLファイルがある階層の1つ下にjsフォルダを作成し、そこにドロワーメニューのjQueryに必要なデータ一式を置いている状態とします。

　まずHTMLソースでは以下のように記述します。

<!DOCTIPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link rel="stylesheet" type="text/css" href="js/meanmenu.css">
</head>

<body>

   <nav>
      <ul>
         <li><a href="#">menu</a></li>
         <li><a href="#">menu</a></li>
         <li><a href="#">menu</a></li>
         <li><a href="#">menu</a></li>
         <li><a href="#">menu</a></li>
      </ul>
   </nav>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="js/jquery.meanmenu.js"></script>
<script>
$(document).ready(function() {
$('nav').meanmenu();
});
</script>

</body>
</html>

このように記述することでドロワーメニューを実装できます！

3. ドロワーメニューのデザインを設定する

　サイトに実際にドロワーメニューが実装できたら、続いてドロワーメニューのデザインを設定していきたいと思います！

　なお、ドロワーメニューのデザインは、meanmenu.cssをいじくって設定します。

バーの色を設定

　まず、バーの色を設定するにはmeanmenu.css内にある以下の項目を変更します。

.mean-container .mean-bar {
	float: left;
	width: 100%;
	position: relative;
	background: #0c1923; //バーの色を設定
	padding: 4px 0;
	min-height: 42px;
	z-index: 999999;
}

リストの色を設定

　続いて、ドロワーメニューのリスト部分(バーのボタンを押したらヌルッと現れる部分)の設定をしたいと思います。それはmeanmenu.cssの以下の部分を変更してあげます。

.mean-container .mean-nav ul li a {
	display: block;
	float: left;
	width: 90%;
	background: #0c1923; //リスト部分の背景色設定
	padding: 1em 5%;
	margin: 0;
	text-align: left;
	color: #fff; //リスト部分の文字色設定
	border-top: 1px solid #383838;
	border-top: 1px solid rgba(255,255,255,0.5);
	text-decoration: none;
	text-transform: uppercase;
}

ドロワーメニューのボタンの色を設定

　続いてドロワーメニューのボタンの色を設定します。まず、「≡」の色は以下のようにCSSを設定します。

.mean-container a.meanmenu-reveal span {
    display: block;
    height: 3px;
    margin-top: 3px;
    background: #fff; //ドロワーメニューの「≡」の色を指定
}

　また、「≡」を押した時に切り替わる「×」の色は以下のようにCSSを設定します。

.mean-container a.meanmenu-reveal {
    width: 22px;
    height: 22px;
    padding: 13px 13px 11px;
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
    text-decoration: none;
    text-indent: -9999em;
    line-height: 22px;
    font-size: 1px;
    display: block;
    font-family: Arial,Helvetica,sans-serif;
    font-weight: 700;
    color: #fff //「×」の色設定
}

まとめ

　以上が上からヌルッと出てくるドロワーメニューの設置方法および基本的なデザインの設定方法になります！このドロワーメニューはよく使うものだと思いますので、是非とも使ってみましょう♪