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の使い方でした。以下からダウンロードできます。

placekittenWebサイト作成時に可愛い猫のダミー画像を用意してくれる「placekitten」前のページ

シンプルでお洒落なCSSボタンを作成できる「CSS Button Generator」次のページCSS Button Generator

関連記事

  1. HR Navigation Responsive Menu
  2. JavaScript

    文章の段落にコメントできるjQueryプラグイン「SideComments.js」

    おもしろそうだったのでメモがてらご紹介。SideComments.js…

  3. Animated Toggle Menu
  4. no-image

    JavaScript

    レスポンシブに対応したモーダルウィンドウのようなアラート実装「jquery.alert」

    jquery.alertはレスポンシブに対応したモーダルウィンドウ風の…

  5. Notyf

    JavaScript

    シンプルでレスポンシブ対応のカッコイイ通知を表示できる「Notyf」

    Notyfはシンプルでレスポンシブに対応したカッコイイ通知を表示させる…

  6. jQuery Flat Shadow

    JavaScript

    フラットデザインに影をつけてくれるjQueryプラグイン「jQuery Flat Shadow」

    フラットデザインのUIに影(シャドウ)をつけてくれるjQueryプラグ…

コメント

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

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

最近の記事

  1. 冬用のふとん
  2. 田沢湖
  3. ゴムの耳栓
  4. ライオンコーヒー(バニラマカダミア)
PAGE TOP