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. tingle.js

    JavaScript

    シンプルで手軽に実装できるモーダルウィンドウ「tingle.js」

    tingle.jsは、シンプルなモーダルウィンドウを実装できるスクリプ…

  2. jQuery Navobile
  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのeachと$.eachの簡単な使い方のメモ

    jQueryのeachと$.eachの使い方のメモです。あんまり深い知…

  4. jQuery Gridly

    JavaScript

    クリックしてその場で拡大したりドラッグで配置を入れ替えたりできるプラグイン「jQuery Gridl…

    おもしろいjQueryプラグインがあったのでご紹介します。クリックして…

  5. sidebar-nav

    JavaScript

    ツリー型のサイドナビゲーションを実装できる「sidebar-nav」

    sidebar-navはツリー型でレスポンシブに対応したサイドナビゲー…

  6. FlipClock.js

    JavaScript

    時計・タイマー・カウントダウンを実装できるjQueryプラグイン「FlipClock.js」

    FlipClock.jsというjQueryプラグインを使えば、時計・タ…

最近の記事

  1. OWL-LPB6701LA
  2. cheero Power Mountain mini 30000mAh CHE-110
  3. 帆布カメラインナーケース B-2タイプ

アーカイブ

PAGE TOP