Solution for Long Drop Down Items

JavaScript

長いメニューもスクロールで表示できる「Solution for Long Drop Down Items」

長いドロップダウンメニューでもスクロール表示してくれるjQueryを活用した「Solution for Long Drop Down Items」をご紹介します。親メニューにマウスオーバーした時に下に並んだたくさんの子メニューをスクロールしながら見せることができます。

Solution for Long Drop Down Items

Solution for Long Drop Down Items

デモ

メニューにマウスオーバーするとズラーっと子メニューが表示されます。そのままでは下側のメニューが見えないのですが、カーソルを下の方に持っていくとその動きに応じてスクロールされるようになっています。

カーソルを上下に動かすことでたくさんある子メニューも追従してくれるので便利ですね。

サイトのメニュー項目がたくさんある場合や画面を固定したい時なんかに役立つかと思います。

ドロップダウンメニューを実装する際に長く伸びて見えなくなってしまう子メニューを、うまく表示させたい時に覚えておきたいところです。

Simple jQuery Sliderシンプルなナビ付きのスライダーを実装できる「Simple jQuery Slider」前のページ

Webサイト内にInstagramの画像を表示できる「Instafeed.js」次のページInstafeed.js

関連記事

  1. progresspieSVG

    JavaScript

    円形のプログレスバーを実装できる「progresspieSVG」

    progresspieSVGは円形のプログレスバーを実装できるjQue…

  2. JavaScript

    円グラフ/折れ線グラフ/棒グラフを簡単に作れるjQueryプラグイン「Peity」

    個人的にかなり便利なプラグインを発見しました。円グラフ、折れ線グラフ、…

  3. jquery.peekABar

    JavaScript

    様々なカスタマイズができる便利な通知バー「jquery.peekABar」

    jquery.peekABarは様々なカスタマイズが可能な通知バー(通…

  4. percircle

    JavaScript

    カスタマイズもできるパーセンテージのサークル実装「percircle」

    percircleはCSSによるパーセンテージのサークルを実装できるj…

  5. Lightense Images
  6. S-Pagination

    JavaScript

    スライダー付きのページネーションを実装できる「S-Pagination」

    S-Paginationはスライダー付きのページネーションを実装できる…

最近の記事

  1. パニーニ(フォカッチャ ベーコンときのこのゴルゴンゾーラクリーム)とエスプレッソ
  2. 広尾 スタバ
  3. 芳醇な香りのラムレーズンサンド
  4. Aモーニングセット
  5. 白トリュフの塩パンやメロンパンなど

アーカイブ

PAGE TOP