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

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

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

  2. flubber

    JavaScript

    滑らかなシェイプアニメーションを実装できる「flubber」

    flubberは、滑らかな2Dによるシェイプアニメーションを実装するこ…

  3. Product comparison

    JavaScript

    製品などの比較に役立つjQueryプラグイン「Product comparison」

    Product comparisonは、いくつかの種類のものを比較する…

  4. elmenu

    JavaScript

    レスポンシブ対応で軽量なハンバーガーメニューを実装できる「elmenu」

    elmenuはレスポンシブに対応した軽量のハンバーガーメニューを実装す…

  5. countdownCube

    JavaScript

    3Dキューブのように回転するカウントダウンタイマーを実装できる「countdownCube」

    countdownCubeは3Dキューブのようにクルッと回転するカウン…

最近の記事

  1. RICOH THETA SC2
  2. 簡易アクセス
  3. SOUNDLINK MINI II Special Edition

アーカイブ

PAGE TOP