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

jQuery Parallax美しいパララックススクロールエフェクトを実装できる「jQuery Parallax」前のページ

クールに拡大・チルトする画像ズーム「Parazoom」次のページParazoom

関連記事

  1. scrollama.js

    JavaScript

    スクロールイベントを実装できるモダンで軽量なJSライブラリ「scrollama.js」

    scrollama.jsは、スクロールイベントを実装することができるモ…

  2. JavaScript

    スライドアニメーションが素敵なjQueryスライダー「Slideshow with jmpress.…

    とても素敵なスライドアニメーションを実装することができるjQueryス…

  3. jQueryプラグインのスライダー集

    JavaScript

    【jQueryプラグイン】素晴らしい機能が満載のスライダー集

    jQueryプラグインには様々な役立つ機能がありますが、中でも人気が高…

  4. no-image

    JavaScript

    コンテナのサイズに合わせて要素を動的に拡大・縮小できる「Scalable」

    Scalableは、コンテナ領域内にある要素をコンテナのサイズに合わせ…

  5. no-image

    JavaScript

    タブやアコーディオンを実装できるjQueryプラグイン「jpix」

    jpixはシンプルなタブやアコーディオンを実装することができるjQue…

  6. no-image

    JavaScript

    スクロールした時に最適な位置に合わせてくれる「jQuery.panelSnap」

    jQuery.panelSnapは、コンテンツごとに縦に並べられたパネ…

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP