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

    JavaScript

    タッチ対応でカルーセルにもできるミニマルなJS(jQuery)スライダー「lory」

    loryはタッチに対応したミニマルなデザインが特徴的なスライダーを実装…

  2. bootstrap-wysihtml5

    JavaScript

    シンプルで美しいWYSIWYGエディタを実装できる「bootstrap-wysihtml5」

    bootstrap-wysihtml5はシンプルでスッキリしたデザイン…

  3. jQuery-Simple-MobileMenu
  4. EndlessRiver

    JavaScript

    エンドレスに流れていくコンテンツスライダー「EndlessRiver」

    EndlessRiverはエンドレスに流れていくコンテンツスライダーを…

  5. JavaScript

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「equalize.js」

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「e…

コメント

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

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

最近の記事

  1. iPhone 11 ProとApple Watch Hermès
  2. cheero Energy Plus mini Wireless 4400mAh
  3. cheero 2 port PD Charger
  4. 台座と紅葉
  5. ニルヴァーナ バターチキンカレー

アーカイブ

PAGE TOP