COMMEND

3つの“D”の視点から
夢あるライフスタイルづくりを提案

Vol.19 jQueryでレスポンシブに対応したドロップダウンメニューをつくる

2014/11/10 up カテゴリー : WEBの現場から！

前回までで完成した【こちら】のWebサイトに、今回はレスポンシブWebデザインに対応したドロップダウンメニューを jQueryを採用し作成していく。レスポンシブWebデザインではよく見かける、下の画像のようなメニューである。ウィンドウサイズが480px以下のときに、このメニューが出現するようになるのだ。
　
レスポンシブメニュー

jQuery「MeanMenu」をダウンロード

→MeanMenu
　
上記リンク先のサイトの右サイドバーの下の「Download ZIP」からダウンロード。解凍してできたフォルダの中にある「jquery.meanmenu.js」ファイルを「sample」フォルダ内「js」フォルダの中に入れる。次に「meanmenu.css」ファイルを「sample」フォルダ内「css」フォルダに入れてやる。

ダウンロードしたファイルをhead内に読み込む

「index.html」

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsiveslides.css">
<link rel="stylesheet" href="css/meanmenu.css">
<title>MY BLOG</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.heightLine.js"></script>
<script type="text/javascript" src="js/responsiveslides.js"></script>
<script type="text/javascript" src="js/responsiveslides.min.js"></script>
<script type="text/javascript" src="js/function.js"></script>
<script type="text/javascript" src="js/scrolltopcontrol.js"></script>
<script type="text/javascript" src="js/jquery.meanmenu.js"></script>

<!-- 省略 -->

</head>

上記ハイライト部分を、ソース内マウスオーバーで現れる右上「ソースを表示」をクリックしてコピー。これでスタイルシートとスクリプトの読み込みは完了だ。

レスポンシブメニューに指定する要素とオプションを追加する

前々回にhead内に記述するjQueryのオプション設定などのスクリプトをひとまとめにした「function.js」ファイルを作成した。これはhead内をなるべくシンプルにするためであり無論、head内に直接記述してもいい。ここではレスポンシブメニューに指定する要素とオプションを「function.js」に書き込んでいく。
　
「function.js」

/* レスポンシブメニューオプション */
$(function() {
	$('#gnav').meanmenu({
	meanMenuClose: "x", // クローズボタン
	meanMenuCloseSize: "18px", // クローズボタンのフォントサイズ
	meanMenuOpen: "<span /><span /><span />", // 通常ボタン
	meanRevealPosition: "right", // 表示位置
	meanRevealColour: "", // 背景色
	meanScreenWidth: "480", // 表示させるウィンドウサイズ(ブレイクポイント)
	});
  });

グローバルナビに指定していた「#gnav」を指定する。これで480pxのブレイクポイントで、レスポンシブメニューが現れるようになった。オプションは初期値のままの設定だが、自由にカスタマイズしてもらってもいい。

「meanmenu.css」をカスタマイズ

あとは見た目を微調整してかっこよくしてあげよう。「meanmenu.css」の22行目あたりを下記のように変更して、「margin-bottom: 15px;」を追加。タイトルロゴとレスポンシブメニューの間隔を広げてやる。
　
「meanmenu.css」

.mean-container .mean-bar {
	float: left;
	width: 100%;
	position: relative;
	background: #0c1923;
	padding: 2px 0;
	min-height: 42px;
	z-index: 999999;
	margin-bottom: 15px;
}

ちなみに「position: relative;」を「position: fixed;」に変更すると、スクロールしてもメニューは上部で固定されたままになり、いつでもグローバルナビを表示させることが可能になる。どちらでも好きな方を採用してもらいたい。
　
最後にPCから下記リンクへアクセスし、ウィンドウ幅を伸縮させレスポンシブメニューを試してもらいたい。本日は以上。
　
【レスポンシブメニュー】
　