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

    JavaScript

    シンプルな棒グラフを生成できる「graphite」

    graphiteはシンプルな棒グラフを生成できるJavaScriptラ…

  2. SuperEmbed.js

    JavaScript

    さまざまな埋め込み動画をレスポンシブで表示できる「SuperEmbed.js」

    SuperEmbed.jsは、さまざまな埋め込み型の動画をレスポンシブ…

  3. MenuSpy

    JavaScript

    セクションビュー対応のナビゲーションメニュー実装「MenuSpy」

    MenuSpyは、ナビゲーションメニューを作成するためのjsライブラリ…

  4. photowall

    JavaScript

    Google画像検索のようにサムネイル画像をクリックするとスライド表示されるjQueryプラグイン「…

    Google画像検索のようなアニメーションを実装することができるjQu…

  5. Slinky

    JavaScript

    モバイルライクなナビゲーションメニューを実装できる「Slinky」

    Slinkyは軽量でレスポンシブに対応したモバイルライクなナビゲーショ…

  6. EZ Plus

    JavaScript

    タッチにも対応した画像ズーム機能を実装できるjQueryプラグイン「EZ Plus」

    EZ Plusはタッチにも対応した画像ズーム機能を実装することができる…

コメント

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

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

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP