DropDownMenu

JavaScript

レスポンシブ対応で多階層なドロップダウンメニューを実装できる「DropDownMenu」

DropDownMenuは、レスポンシブに対応した多階層なドロップダウンメニューを実装することができます。jQueryとLESSが使われているとのこと。レスポンシブ対応のドロップダウンメニューを自サイトに取り入れたい人にはピッタリですね。

DropDownMenu

デモ

デモでは画面上部に、Menu 1、Menu 2、Menu 3というナビゲーションが表示されており、各メニュー項目にマウスオーバーすると、その下にある階層のメニューが表示されます。

マウスオーバーしていくことで、次々に下にある階層のメニューが現れてくるので、効率よく目的のメニュー項目へアクセスできます。

複雑なアニメーションもなく、シンプルにメニュー項目が表示されていくのがいいですね。

また、DropDownMenuはレスポンシブにも対応しているのが特徴です。デモページの画面の横幅を縮小していくとわかりますが、モバイル版になると横に並べられていたメニューがハンバーガーメニューのアイコンに切り替わります。

モバイル版ではメニューをクリックしていくことで、下にある階層のメニューを表示させることが可能です。

パソコンだけではなくスマホなどでも快適な多階層のドロップダウンメニューを表示させれるのがいいですね。

というわけで、jQueryとLESSを活用したレスポンシブ対応の多階層ドロップダウンメニューを実装したいという人は、ぜひ「DropDownMenu」をチェックしてみてください。

DropDownMenu

関連記事

  1. jQuery plugin Watermark
  2. Responsive Nav

    JavaScript

    レスポンシブ対応の軽量なナビゲーションを実装できる「Responsive Nav」

    レスポンシブ対応のナビゲーションを実装できる「Responsive N…

  3. jquery.peekABar

    JavaScript

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

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

  4. Sticky Elements

    JavaScript

    エレメントがくっついてくるアニメーション「Sticky Elements」

    Sticky Elementsはエレメントにカーソルを乗せるとくっつい…

  5. characterCounter

    JavaScript

    文字数のカウントや制限ができるjQueryプラグイン「characterCounter」

    characterCounterは文字数をカウントしてくれるシンプルな…

  6. t-scroll

    JavaScript

    アニメーションとともにアイテムが一つずつ現れる「t-scroll」

    t-scrollはアニメーションとともにアイテムを一つずつ表示させるこ…

最近の記事

  1. 赤いなつめ
  2. ペーストしてスタイルを合わせる
  3. Hermèsオレンジスポーツバンド
  4. GoPro HERO8 Black

アーカイブ

PAGE TOP