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. Image Lightbox
  2. Maximum Characters limit exceeded warning
  3. Linear Slider

    JavaScript

    シンプルな機能で使いやすいjQueryによる水平スライダー「Linear Slider」

    Linear Sliderはシンプルな機能性による水平スライダーを実装…

  4. jQuery.sdFilterMe

    JavaScript

    コンテンツを並べ替えれるフィルタリング機能の実装「jQuery.sdFilterMe」

    jQuery.sdFilterMeは、ポートフォリオ、記事、ギャラリー…

  5. no-image

    JavaScript

    さまざまなSVGパターンによるCSSプログレスバー「Bars」

    Barsはさまざまな種類のSVGパターンによるCSSプログレスバーを実…

  6. no-image

    JavaScript

    高さを揃えたレスポンシブな画像ギャラリー「jQuery Mosaic plugin」

    jQuery Mosaic pluginは高さを揃えたレスポンシブな画…

コメント

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

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

最近の記事

  1. M360bt
  2. BQ-CASE/1
  3. GLOO BOX

アーカイブ

PAGE TOP