ナビゲーションとコンテンツが連動して切り替わる便利なjQueryプラグイン「Navi.js」をご紹介します。1つのファイル内に色んなコンテンツを収めたい場合にとても有効ですね。目的のメニュー項目をクリックすると、それに合うコンテンツだけが表示されて、他は非表示になります。以下、使い方です。
[ads_center]
使い方
jQueryとダウンロードしたプラグインを読み込みます。
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script> <script type="text/javascript" src="navi-1.4.js"></script>
Navi.jsをセットします。
<script type="text/javascript">
$(function() {
$("#navi").navi({
hash: "#!/",
content: $("#content")
});
});
</script>
HTMLを記述していきます。ナビゲーションとコンテンツは共にulのli要素に指定していきます。ここでは、navには#naviを、sectionには#contentを指定しました。
<nav id='navi'>
<ul>
<li class="active"><a href='#!/page1'>Page1</a></li>
<li><a href='#!/page2'>Page2</a></li>
<li><a href='#!/page3'>Page3</a></li>
</ul>
</nav>
<section id='content'>
<ul>
<li id='page1'>ここはコンテンツ1のテキストです。ここはコンテンツ1のテキストです。ここはコンテンツ1のテキストです。ここはコンテンツ1のテキストです。</li>
<li id='page2'>ここはコンテンツ2のテキストです。ここはコンテンツ2のテキストです。ここはコンテンツ2のテキストです。ここはコンテンツ2のテキストです。</li>
<li id='page3'>ここはコンテンツ3のテキストです。ここはコンテンツ3のテキストです。ここはコンテンツ3のテキストです。ここはコンテンツ3のテキストです。</li>
</ul>
</section>
オプション
オプションを指定する場合は以下のように記述します。
<script type="text/javascript">
$(function() {
$("#navi").navi({
hash: "#!/",
content: $("#content"),
animationSpeed: 300,
animationType: "fade"
});
});
</script>
animationSpeedで、アニメーションのスピードを変更できます。animationTypeには、それぞれ、slideUp、fade、slideLeft、slideUpLeftがあります。ちなみにデフォルトはslideUpです。
他にも色んなオプションがあるので詳しくは公式サイトをご確認ください。
ということで、以上、Navi.jsの使い方でした。以下からダウンロードできます。
