jQueryプラグインでレスポンシブなメニューを作る「MeanMenu」

昨今流行っているレスポンシブ・ウェブデザインですが、メニューの扱いに悩むことがあるかもしれません。
jQueryプラグインのMeanMenuを利用すれば、ウィンドウサイズに応じてメニューを最小化してくれます。
よくあるスマホサイト風になり、お悩みが解消されるかもしれません。

sponsors

使用方法

下記のようなメニューがあるとします。

	<nav>
		<ul id="nav">
			<li><a href="#">Top Level Link</a></li>
			<li><a href="#">Top Level Link</a></li>
			<li><a href="#">Top Level Link</a></li>
			<li><a href="#">Top Level Link</a></li>
		</ul>
	</nav>
これに対して、単にjQueryなどを読みこめばあっという間に対応することが可能です。

<link rel="stylesheet" href="meanmenu.css">
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script src="jquery.meanmenu.js"></script> 
<script>
$(document).ready(function() {
    $('nav').meanmenu();
});
</script>
なお、オプションもあります。
以下のようにすることで、既存デザインにあわせて調整可能です。

    $('nav').meanmenu({
            meanMenuClose: "X", // クローズボタンのテキスト
            meanMenuCloseSize: "18px", // クローズのテキストサイズ
            meanRevealPosition: "right", // 表示場所(left,right,center)
            meanRevealColour: "", // 背景色
            meanScreenWidth: "480", // 表示させるウィンドウサイズ

    });

サンプル

ウィンドウ幅を縮めて下さい。

sponsors

Javascriptサンプルページ一覧
skuare.net