いますぐ導入!jQueryプラグイン「Naver」でスマホ対応レスポンシブメニュー

ウィンドウサイズを変えたら自動でメニューを折りたたんでくれるサイトありますよね。
jQueryプラグインのNaverを利用すると、これがいますぐ導入できます。

sponsors

使用方法

Naverからファイル一式をダウンロード。
こんなメニューに適用するとします。

<nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
</nav>
	

落としてきたjsとcssを記述して、あっと言う間に完成です。

<link href="jquery.fs.naver.css" media="all" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script src="jquery.fs.naver.js"></script>
<script type="text/javascript">
$(function(){
      $("nav").naver({
      	animated: true, //メニューを表示するときの動きを付けるかどうか
      	labelClosed: "メニュー", //閉じている時の見出し
      	labelOpen: "閉じる" //開いている時の見出し
      });
});
</script>
	

サンプル

ウィンドウサイズを変えてみて下さい。

sponsors

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