Priority Nav Scroller

JavaScript

水平スクロールができるナビゲーション「Priority Nav Scroller」

Priority Nav Scrollerは水平スクロールを備えたナビゲーションを実装できるプラグインです。ナビゲーションメニューのリストが画面に収まらない場合には水平スクロールによって隠れている項目を表示させることが可能です。

Priority Nav Scroller

デモ

デモページの一番上にあるデモ(Large amount of links)では、横一列に並べられたナビゲーションメニューが設置されています。たくさんのメニュー項目があるので全て表示されているわけではありませんが、右側の矢印ボタンをクリックすると、隠れているメニュー項目がスライドとともに出てきます。一方、左側の矢印ボタンをクリックすると逆にスライドします。

左右の矢印ボタンからだけではなく、ナビゲーション上で水平スクロールをすることでも自由に左右に動かすことが可能です。

シンプルな操作性でとても使いやすいナビゲーションに仕上がっています。多階層のメニューが多いナビゲーションには適さないかもしれませんが、同じ階層でのメニュー項目がたくさんある場合には有効な選択肢の一つとして覚えておきたいところですね。

オプションでは、selector、navSelector、contentSelector、itemSelector、buttonLeftSelector、buttonRightSelector、scrollStepといった項目によるセッティングが可能です。

Priority Nav Scroller

関連記事

  1. hop

    JavaScript

    Webページ上の好きな場所をハイライトできる「hop」

    hopはオーバーレイされたWebページ上の好きな場所をハイライトするこ…

  2. JavaScript

    レスポンシブでカスタマイズ性に優れたカルーセルを実装できるjQueryプラグイン「slick」

    slickというjQueryプラグインを使えば、レスポンシブでカスタマ…

  3. Impulse Slider

    JavaScript

    3Dスライダーを実装できるjQueryプラグイン「Impulse Slider」

    Impulse SliderというjQueryプラグインを使えば3Dス…

  4. JavaScript

    チルトシフト効果でミニチュア風の写真に仕上げてくれるjQueryプラグイン「tiltShift.js…

    指定した画像にチルトシフト効果をプラスしてミニチュア風にしてくれるjQ…

  5. no-image

    JavaScript

    レスポンシブ対応のシンプルなLightboxプラグイン

    レスポンシブに対応したシンプルなLightboxプラグインを紹介します…

  6. Salvattore

最近の記事

  1. スタバのドリップのホットのショート
  2. LE エルイー 6 PANEL CAP
  3. タリーズ ハウスブレンド
  4. BAG-TW1BKシリーズ

アーカイブ

PAGE TOP