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. no-image

    JavaScript

    マスクエフェクトが素敵なスライダー実装「Masked Circle Slider」

    Masked Circle Sliderは、円形のマスクエフェクトが素…

  2. Scrollgress

    JavaScript

    スクロールに連動するプログレスバーを実装できる「Scrollgress」

    Scrollgressはスクロールに連動するシンプルで軽量なプログレス…

  3. Scrolla

    JavaScript

    スクロール時にアニメーションするjQueryプラグイン「Scrolla」

    Scrollaは上下スクロールしたときにアニメーションするjQuery…

  4. JavaScript

    JavaScriptの基本構文を忘れた!って時にサクっと見たい10項目

    最近はよくjQueryプラグインを使ったりすることが多くなってきたので…

  5. BookBlock Revised
  6. Tip

    JavaScript

    シンプルなUIで使いやすいツールチップ実装「Tip」

    TipはシンプルなUIによる使いやすいツールチップを実装することができ…

最近の記事

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