メガドロップダウンメニューの作り方

最近よく見かけるようになったメガドロップダウンメニュー

メガメニューとかメガナビゲーションとも呼ばれるようですね。

従来のドロップダウンメニューとの違いは、メガドロップダウンメニューの場合、
画面幅をフルに活用した広い領域に多層構造のメニューが表示されます。

情報量やページ数が多いサイトなんかに使うと、お目当てのコンテンツを一目で探せるので、
ユーザビリティが向上します。

シンプルなコーディングの例としては以下のようなものです。

デモ

HTML


CSS


JavaScript(jQuery)

ちなみにこのHTMLの構造(グローバルナビのメニューであるliタグの中にメニューの内容を記述するパターン)であれば、CSSだけでも実装できます。
CSSのみの場合は一例として以下のようなコードになります。

デモ(jqueryを使わない方法)

CSS(jqueryを使わないバージョン)

解説

.mdd_inner を「overflow:hidden」かつ「max-height:0」にしておき、メニューにマウスオーバーしたときに「max-height:300px」にするようにしています。
「transition:max-height .5s ease」を指定することで瞬間的に変わるのではなく、アニメーションのようにスムーズに変化します。

今回はデモなので高さを 300px にしていますが、コンテンツの内容によって調整すればよいでしょう。
表示させるメニューの内容によっては、一律の高さにはならないかとは思いますが、「max-height」で余裕を持った高さを指定することで実装は可能です。

ただ、この方法だと表示するメニューの高さが異なる場合、アニメーションの速度がまちまちになってしまうため、スライドダウンするスピードを一定にしたい場合はjqueryを使った方法が良いでしょう。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする