DropDownMenu

JavaScript

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

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

DropDownMenu

デモ

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

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

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

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

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

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

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

DropDownMenu

関連記事

  1. Random Text Shuffle

    JavaScript

    シャッフルしながらテキストが表示される「Random Text Shuffle」

    Random Text Shuffleは文字をシャッフルしながらテキス…

  2. no-image
  3. basicScroll

    JavaScript

    モバイル・デスクトップに対応したパララックススクロール実装「basicScroll」

    basicScrollはモバイル・デスクトップに対応したスタンドアロー…

  4. Responsive Parallax Drag-slider With Transparent Letters
  5. JavaScript

    マルチレベルで操作性に優れたレスポンシブ対応のjQueryナビゲーション

    レスポンシブに対応したマルチレベルの便利なjQueryナビゲーションが…

  6. JQuery-SnakeGallery

    JavaScript

    ホバーした方向へエフェクトが追従してくる「JQuery-SnakeGallery」

    JQuery-SnakeGalleryは、ホバーした方向へエフェクトが…

最近の記事

  1. s9+
  2. SRS-LSR200
  3. QC30
  4. リンツ リンドール

アーカイブ

PAGE TOP