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. JavaScript

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「equalize.js」

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「e…

  2. JavaScript

    レスポンシブにも対応している人気のjQueryプラグインのスライダー「Nivo Slider」の使い…

    レスポンシブにも対応している人気のjQueryプラグイン「Nivo S…

  3. Motion Blur Effect with SVG

    JavaScript

    ブラーエフェクトを効果的に取り入れる「Motion Blur Effect with SVG」

    Webページ内でブラーエフェクトを効果的に取り入れることができる「Mo…

  4. JavaScript

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイン「jQuery Zoom」

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイ…

  5. Turntable.js

    JavaScript

    画像を使ってストップモーション動画のような効果を実装できる「Turntable.js」

    Turntable.jsは複数の画像を使ってストップモーション動画のよ…

  6. jQuery fullsizable

最近の記事

  1. 田沢湖
  2. ハクバ シリコンクロス
  3. トライポッドスリーブ
  4. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ

Instagram始めました

Facebookページ

PAGE TOP