うろぐ

インターネットサービス&デジタル家電&デジタルカメラ&パソコンのレビュー

レスポンシブルWEBデザインに対応したメニューをmeanmenuを使って作りました。
FlexNavと表示が異なるので、サイトデザインによって使い分けられます。

MeanMenuのオフィシャルサイトはMeanMenuです。
GitHubのMeanMenuからダウンロードします。

添付されているcssファイルを読み込みます。


<link rel="stylesheet" href="//ulog.biz/css/meanmenu.min.css" type="text/css" />

JavaScriptを読み込みます。
jQueryとjquery.meanmenu.min.jsの二つのファイルです。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="//ulog.biz/javascripts/jquery-2.0.3.min.js"><\/script>')</script>
<script src="//ulog.biz/javascripts/jquery.meanmenu.min.js"></script>

JavaScriptのソースと、htmlソースです。
htmlはnavタグ、ulタグ、liタグで入れ子で囲みます。


<header>
<script>
$(function(){
	$('nav').meanmenu({
		meanMenuClose: "x", // クローズボタン
	    meanMenuCloseSize: "18px", // クローズボタンのフォントサイズ
	    meanMenuOpen: "<span /><span /><span />", // 通常ボタン
	    meanRevealPosition: "right", // 表示位置
	    meanRevealColour: "", // 背景色 cssで定義
	    meanScreenWidth: "768", // 表示させるウィンドウサイズ(ブレイクポイント)
	});
});
</script>
<nav>
<ul>
<li><a href="//ulog.biz/" title="*">ホーム</a></li>
<li><a href="//ulog.biz/1/" title="*">コンテンツ1</a></li>
<li><a href="//ulog.biz/2/" title="*">コンテンツ2</a></li>
<li><a href="//ulog.biz/3/" title="*">コンテンツ3</a></li>
</ul>
</nav>
<h1>うろぐ</h1>
</header>

JavaScriptのパラメーターは、meanRevealColourはメニューの「」の背景色ですが、cssで定義した方が後々の管理が楽です。
meanScreenWidthは、横ら並びにメニューの配置が変わる画面のサイズです。メニューの数と文字数などを勘案して数字を決めます。

cssファイルの書き方です
下記はスマホ・タブレット縦置きのサイズ、タブレット横置き・パソコン向け共通です。
わたしが初期設定を変えたのはカラーとpaddingの値だけでした。



/* meanmenu メニューの定義 */
header nav {
	text-align: center;
	background: #009900;
}
header nav ul {
	margin: 0;
	padding: 0.5em;
	list-style-type: none;
}
header nav ul li {
	display: inline;
	margin-left: 1em;
}
header nav ul li:first-child {
	margin-left: 0;
}

レスポンシブルWEBデザインらしいデザインをヘッダーのメニューに導入できるソースが、以外に簡単にかけました。

3月 1st, 2015

Posted In: JavaScript, Responsive Web Design