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. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで今まで紹介したjQueryプラグイン25選のまとめ 2011/09 – 201…

    2011年9月〜2012年3月までに当ブログで紹介したjQueryプラ…

  2. no-image

    JavaScript

    レスポンシブ対応の軽量・コンパクトでシンプルなモーダルボックス「Modelo」

    Modeloは軽量・コンパクトなモーダルボックスを実装できるjQuer…

  3. evol-colorpicker

    JavaScript

    マイクロソフト オフィス2010のようなカラーピッカー「evol-colorpicker」

    evol-colorpickerは、マイクロソフト オフィス2010の…

  4. jQuery Inline Footnotes

    JavaScript

    ホバーで脚注を表示できる「jQuery Inline Footnotes」

    jQuery Inline Footnotesはホバーすることで脚注の…

  5. JavaScript

    レスポンシブに対応している軽量のjQueryスライダー「Unslider」

    とても軽量でレスポンシブにも対応しているjQueryスライダー「Uns…

最近の記事

  1. ライオン システマ 超コンパクト ふつう
  2. タリーズ ハムチーズ&サラダサンド
  3. クリニカのY字タイプのフロス
  4. 日和山公園の桜
  5. 成城石井 フレンチロースト

アーカイブ

PAGE TOP