Navi.js

JavaScript

ナビゲーションとコンテンツが連動して切り替わるjQueryプラグイン「Navi.js」

ナビゲーションとコンテンツが連動して切り替わる便利な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の使い方でした。以下からダウンロードできます。

関連記事

  1. h5Validate

    JavaScript

    HTML5のフォームバリデーションを実装できるjQueryプラグイン「h5Validate」

    h5ValidateはHTML5によるフォームバリデーションを実装する…

  2. no-image

    JavaScript

    1日のイベントスケジュールを作成できる「Jquery Layoutday plugin」

    Jquery Layoutday pluginは、1日のイベントスケジ…

  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでアニメーション動作中と停止中で処理を分ける:animatedと:not(:animat…

    jQueryでアニメーションが動作中の時だけ、またはアニメーションが停…

  4. no-image

    JavaScript

    シンプルなイメージカルーセルを実装できる「Boishakh carousel」

    Boishakh carouselはシンプルなイメージカルーセルを実装…

  5. no-image

    JavaScript

    アクセシブルなビフォーアフター画像を実装できる「BeerSlider」

    BeerSliderはVanilla JSによるアクセシブルなビフォー…

  6. jQuery UI Month Picker Plugin

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP