【jQueryプラグイン】レスポンシブなメニューをつくるなら「MeanMenu」

スマートフォンでよく見る形のナビゲーションメニューがつくりたいなあ

どーしよっかなあ

うーんうーんうーーーーーーーーーーーん

いろいろとggってたら、いい感じの、とてもわかりやすいサイトに出会った

jQueryプラグインのMeanMenuを利用すればサクっと実装できるみたい

— HTML —

<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>

— SCRIPT —

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

meanmenu.css

jquery.meanmenu.js

— OPTION —

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

— DEMO —
http://www.meanthemes.com/demo/meanmenu/demo.html

参考サイト：skuare.netさま http://www.skuare.net/2013/03/jquerymeanmenu.html