レスポンシブなメニューを導入!jQueryプラグイン「MeanMenu」

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

使用方法 下記のようなメニューがあるとします。
<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", // 表示させるウィンドウサイズ
});

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

sponsors

「レスポンシブなメニューを導入!jQueryプラグイン「MeanMenu」」をシェアする

記事作成:
記事URL:

TOP > > > レスポンシブなメニューを導入!jQueryプラグイン「MeanMenu」