DropDownMenu

JavaScript

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

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

DropDownMenu

デモ

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

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

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

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

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

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

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

DropDownMenu

関連記事

  1. jsPanel

    JavaScript

    高度なセッティングができるフローティングパネルやモーダルウィンドウ実装「jsPanel」

    jsPanelは高度なセッティングができるフローティングパネル、モーダ…

  2. jQuery Resizable Columns

    JavaScript

    テーブルの列の幅をドラッグでサイズ変更できる「jQuery Resizable Columns」

    じっくりテーブル内の情報を見たい時なんかに便利そうですね。テーブルの列…

  3. Hamburger Icon Menu
  4. OverlayScrollbars
  5. Warp drive jQuery plugin
  6. VerticalShift

    JavaScript

    要素を縦長に並べてマウスオーバーで全部表示させるjQueryプラグイン「VerticalShift」…

    とても面白い見せ方だったのでご紹介します。要素を縦長に並べてマウスオー…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP