DropDownMenu

JavaScript

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

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

DropDownMenu

デモ

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

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

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

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

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

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

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

DropDownMenu

jquery.datepicker未来的なデータピッカーを実装できる「jquery.datepicker」前のページ

フェードとディレイ(遅延)アニメーションでテキストを表示する「jQuery Text Fade Delay」次のページjQuery Text Fade Delay

関連記事

  1. SimpleAccordion

    JavaScript

    シンプルなアコーディオンを実装できるjQueryプラグイン「SimpleAccordion」

    SimpleAccordionは、シンプルなアコーディオンを実装するこ…

  2. no-image

    JavaScript

    シンプルで美しい軽量のjQueryモーダルウィンドウ「umodal」

    umodalはスッキリしたシンプルで美しいモーダルウィンドウを実装でき…

  3. Multi-Level Menu

    JavaScript

    流れるような遅延アニメーションが美しい階層化メニュー実装「Multi-Level Menu」

    Multi-Level Menuは流れるような遅延アニメーションが美し…

  4. Salvattore
  5. hsimp

    JavaScript

    パスワードの安全性を教えてくれる「hsimp」

    hsimpは、パスワードがどれだけ安全かを判定してくれるスクリプトです…

  6. Data Img

    JavaScript

    ブラウザ幅に応じて画像を切り替えれるレスポンシブ対応のjQueryプラグイン「Data Img」

    Data Imgはブラウザ幅に応じて最適なサイズの画像を切り替えて表示…

最近の記事

  1. 東京都現代美術館
  2. スーリア バターチキン
  3. そそそ 明太クリームそうめん
  4. すしざんまい
  5. 蒼龍唐玉堂 特製牛バラ担々麺

アーカイブ

PAGE TOP