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

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

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

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

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

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

HTML

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

<ul>

<li>Menu2

</div>

</li>

</ul>

</nav>

CSS

* {
  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;
}

* {

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）

$(function(){
  
  $(".g_nav > ul > li").hover(function(){
    
    $(this).find(".mdd_inner").stop().slideDown();
    
  },function(){
    
    $(this).find(".mdd_inner").stop().slideUp();
    
  });
  
});

$(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を使わないバージョン）

* {
  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;
}

* {

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を使った方法が良いでしょう。