最近よく見かけるようになったメガドロップダウンメニュー。
メガメニューとかメガナビゲーションとも呼ばれるようですね。
従来のドロップダウンメニューとの違いは、メガドロップダウンメニューの場合、
画面幅をフルに活用した広い領域に多層構造のメニューが表示されます。
情報量やページ数が多いサイトなんかに使うと、お目当てのコンテンツを一目で探せるので、
ユーザビリティが向上します。
シンプルなコーディングの例としては以下のようなものです。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<nav class="g_nav"> <ul> <li>Menu1</li> <li>Menu2 <div class="mdd_wrap"> <div class="mdd_inner"> <!-- メガドロップダウンメニューの内容 --> </div> </div> </li> <li>Menu3</li> <li>Menu4</li> </ul> </nav> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
* { margin:0; padding:0; } .g_nav { position:relative; } .g_nav > ul { display:flex; width:1000px; margin:0 auto; list-style:none; } .g_nav > ul > li { width:100%; padding:10px; background:#333; color:#fff; text-align:center; } .mdd_wrap { position:absolute; top:100%; left:0; width:100%; } .mdd_wrap .mdd_inner { display:none; width:1000px; height:300px; margin:0 auto; background:#ccc; } |
JavaScript(jQuery)
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function(){ $(".g_nav > ul > li").hover(function(){ $(this).find(".mdd_inner").stop().slideDown(); },function(){ $(this).find(".mdd_inner").stop().slideUp(); }); }); |
ちなみにこのHTMLの構造(グローバルナビのメニューであるliタグの中にメニューの内容を記述するパターン)であれば、CSSだけでも実装できます。
CSSのみの場合は一例として以下のようなコードになります。
デモ(jqueryを使わない方法)
CSS(jqueryを使わないバージョン)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
* { margin:0; padding:0; } .g_nav { position:relative; } .g_nav > ul { display:flex; width:1000px; margin:0 auto; list-style:none; } .g_nav > ul > li { width:100%; padding:10px; background:#333; color:#fff; text-align:center; } .mdd_wrap { position:absolute; top:100%; left:0; width:100%; } .mdd_wrap .mdd_inner { width:1000px; height:300px; max-height:0; /* 追加 */ margin:0 auto; background:#ccc; overflow:hidden; /* 追加 */ transition:max-height .5s ease; /* 追加 */ } /* 追加 */ .g_nav > ul > li:hover .mdd_wrap .mdd_inner { max-height:300px; } |
解説
.mdd_inner を「overflow:hidden」かつ「max-height:0」にしておき、メニューにマウスオーバーしたときに「max-height:300px」にするようにしています。
「transition:max-height .5s ease」を指定することで瞬間的に変わるのではなく、アニメーションのようにスムーズに変化します。
今回はデモなので高さを 300px にしていますが、コンテンツの内容によって調整すればよいでしょう。
表示させるメニューの内容によっては、一律の高さにはならないかとは思いますが、「max-height」で余裕を持った高さを指定することで実装は可能です。
ただ、この方法だと表示するメニューの高さが異なる場合、アニメーションの速度がまちまちになってしまうため、スライドダウンするスピードを一定にしたい場合はjqueryを使った方法が良いでしょう。