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

デモ

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

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

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

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

関連記事

  1. jQuery GoUp!

    JavaScript

    ページ上部にスクロール移動してくれる「jQuery GoUp!」

    jQuery GoUp!は、ページ上部にスクロール移動してくれるシンプ…

  2. Docked Link jQuery Plugin
  3. jQuery Bar Rating

    JavaScript

    選択範囲を評価ウィジェットに変換できる「jQuery Bar Rating」

    jQuery Bar Ratingは、ユーザーが選択する範囲を評価ウィ…

  4. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量ライブラリ「Lazyestload.js」

    Lazyestload.jsは画像の遅延読み込み機能を実装できる軽量の…

  5. emotion-ratings

    JavaScript

    絵文字を使ったレーティング機能を実装できる「emotion-ratings」

    emotion-ratingsは絵文字を使ったレーティング機能を実装で…

  6. Stacked Strips

    JavaScript

    スタックしながらスクロールできるエフェクト実装「Stacked Strips」

    Stacked StripsはWebページをスクロールする時に、スタッ…

最近の記事

  1. ワンタッチ着脱フィルターキット
  2. Soundcore Ace A1
  3. cheero USB-C PD Charger 60W
  4. DY-S01

アーカイブ

PAGE TOP