メガドロップダウンメニューって何?国内の参考事例とjQueryでの作り方を解説

今回は「メガドロップダウンメニューとは何か?」から国内の参考事例とjQueryを使った作り方を紹介していきます。

メガドロップダウンメニューとは?

メガドロップダウンメニューとはグローバルナビゲーションを拡張する機能のことです。

簡単にいうと、グローバルナビゲーションで使われるプルダウンの大きいバージョンです。

グローバルナビゲーションにマウスカーソルを当てると画面横幅いっぱいに大きなメニューが表示されます。

このエリアには下層ページへのコンテンツを複数掲載できるので、多階層のサイトでよく使われていて、メガメニューとも呼ばれます。

国内の参考事例

国内で有名なところだと電通のウェブサイトで使われています。

電通ウェブサイト

 電通ウェブサイトはこちら

キリンのサイトはメガドロップダウンメニュー内に写真を入れていてナビゲーションとして見やすいですね。

キリンのウェブサイト

 キリンのウェブサイトはこちら

KDDIのサイトはアイコンをメガドロップダウンメニュー内に入れることで直感的にメニューを認識させる工夫ができてます。

KDDIのウェブサイト

 KDDIのウェブサイトはこちら

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

それでは、メガドロップダウンメニューをjQueryを使って作ってみたいと思います。
まずはサンプルを見てみてください。

マウスカーソルがグローバルナビゲーションにマウスオーバーするとメガドロップダウンメニューが出てきます。
メガドロップダウンメニューには吹き出しのような三角形もつけています。

HTML

<ul class="clearfix">
<li>
<a href="#" class="navi">ナビ1</a>
<div class="megaWrap">
<div class="megaContentWrap"> サンプルタイトル1<div class="megaContent clearfix">
<dl>
<dt><a href="#"><img src="img.png" alt="#"></a></dt>
<dd><a href="#">リンクテキスト</a></dd>
</dl>
<dl>
<dt><a href="#"><img src="img.png" alt="#"></a></dt>
<dd><a href="#">リンクテキスト</a></dd>
</dl>
<dl>
<dt><a href="#"><img src="img.png" alt="#"></a></dt>
<dd><a href="#">リンクテキスト</a></dd>
</dl>
<dl>
<dt><a href="#"><img src="img.png" alt="#"></a></dt>
<dd><a href="#">リンクテキスト</a></dd>
</dl>
</div></div></div>
</li>
</ul>

JavaScript

$(function(){
$('#content &gt; ul &gt; li').hover(function(){
megaMenu = $(this).children('.megaWrap');
gnavi = $(this).children('.navi');
megaMenu.each(
function(){
megaMenu.css({display:'block',opacity:'0'}).stop().animate({opacity:'1'},600);
gnavi.after('&lt;div class="naviSankakuWrap"&gt;&lt;p class="naviSankaku"&gt;&lt;/p&gt;&lt;/div&gt;');
$('.naviSankaku').css({display:'block',opacity:'0'}).stop().animate({opacity:'1'},600);
});
},function(){
megaMenu.css({display:'none'});
$('.naviSankaku').css({display:'none'});
$('.naviSankakuWrap').remove();
});
});

JSの解説

まずは「グローバルナビゲーションにマウスオーバーしたら何かをする」という記述をします。

$(function(){
$('#content &gt; ul &gt; li').hover(function(){
//ここに何をするのかを記述する
});
});

次にメガドロップダウンメニューなので、マウスカーソルを当てた項目配下のコンテンツを出したいですよね。
javaScriptの条件式を日本語にすると以下のようになります。

「マウスオーバーをしているliの中にあるdivを表示させる。」

ということは、まずマウスオーバーしているliの中にあるdivを指定する必要がありますね。
その指定は以下のように記述します。

megaMenu = $(this).children('.megaWrap');

divには予め「.megaWrap」をつけているので、今マウスオーバーしているliの中にある「megaWrap」というクラスがついている要素を変数に入れています。この変数を使って表示、非表示をするだけです。

ただ表示するだけだと少しうっとうしいので、opacity操作でフェードインするようにしています。

megaMenu.each(
function(){
megaMenu.css({display:'block',opacity:'0'}).stop().animate({opacity:'1'},600);
});
},function(){
megaMenu.css({display:'none'});
});

each()メソッドの使い方

each()メソッドは要素1つずつそれぞれに関数を実行したい時に使います。

今回はグローバルナビゲーションにある、それぞれのナビゲーションリンクに対して関数を実行したいのでeach()メソッドを使っています。

吹き出しの三角図形を入れる

メガドロップダウンメニューが「どこのナビゲーションリンクから出てきたものなのか」を明示するために吹き出しのような三角形の図形を入れています。

この図形はCSS描画していて 、マウスオーバーしたらHTMLにこの図形を挿入するような仕組みにしています。
まずはCSSで三角形を描画してみましょう。

.naviSankaku{
width: 0px;
height: 0px;
margin: auto;
border-right: 20px solid transparent;
border-bottom: 25px solid #efefef;
border-left: 20px solid transparent; 
display: none;
}

この三角形を出すためのHTMLは以下のような空divを用意しておきます。

<div class="naviSankakuWrap"><p class="naviSankaku"></p></div>

この空divをメガドロップダウンメニューがでるのと同じタイミングで表示させてあげればOK。

挿入位置は各ナビゲーションリンクのすぐ下なので指定をしなくてはいけませんね。

ナビゲーションリンクのすぐ下なので「.navi」がついている要素のすぐ後に空divを挿入したいと思います。

<ul class="clearfix"><li><a href="#" class="navi">ナビ1</a> //ここに空divを挿入したい <div class="megaWrap"> <div class="megaContentWrap">

まずは、マウスオーバーしたナビゲーション配下の「.navi」を指定して変数に入れます。

gnavi = $(this).children('.navi');

この変数を使って空divを入れ込むためには以下の記述をします。

gnavi.after('<div class="naviSankakuWrap"><p class="naviSankaku"></p></div>');

後は、メガドロップダウンメニューと同じ仕様で表示と非表示を指定してあげればOKです。

ここで注意点としては空divを挿入しているので、マウスカーソルが外れたらこの空divを削除しておかないとマウスオーバーするたびに空divが増えていってしまいます。

空divを削除するには以下の記述をします。

$('.naviSankakuWrap').remove();

解説は以上です。これらをまとめると以下の完成版のJavascriptになります。

$(function(){ $('#content > ul > li').hover(function(){ megaMenu = $(this).children('.megaWrap'); gnavi = $(this).children('.navi'); megaMenu.each( function(){ megaMenu.css({display:'block',opacity:'0'}).stop().animate({opacity:'1'},600); gnavi.after('<div class="naviSankakuWrap"><p class="naviSankaku"></p></div>'); $('.naviSankaku').css({display:'block',opacity:'0'}).stop().animate({opacity:'1'},600); }); },function(){ megaMenu.css({display:'none'}); $('.naviSankaku').css({display:'none'}); $('.naviSankakuWrap').remove(); }); });