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. JavaScript

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

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

  2. Timeline.js

    JavaScript

    スライド式のタイムラインを実装できるjQueryプラグイン「Timeline.js」

    Timeline.jsは、スライド式によるタイムラインを実装することが…

  3. overhang.jp

    JavaScript

    シンプルでクールな通知バーを実装できるjQueryプラグイン「overhang.jp」

    overhang.jsは、通知バーを実装するためのjQueryプラグイ…

  4. no-image

    JavaScript

    スクロールした時に最適な位置に合わせてくれる「jQuery.panelSnap」

    jQuery.panelSnapは、コンテンツごとに縦に並べられたパネ…

  5. jAnimate

    JavaScript

    フリップやバウンスなどのアニメーションを要素に実装できる「jAnimate」

    jAnimateはフリップやバウンスなどといったアニメーションを要素に…

  6. AnimatedSlideNav

    JavaScript

    動きがオシャレなアニメーションのサイドナビゲーション「AnimatedSideNav」

    AnimatedSideNavは、動きがオシャレなアニメーションによる…

最近の記事

  1. VS-543AS
  2. タリーズ 本日のコーヒー
  3. MRW-G1
  4. 桜と太陽

アーカイブ

PAGE TOP