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

メガドロップダウンメニューを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 > 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();
});
});

JSの解説

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

$(function(){
$('#content > ul > 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();
});
});

こちらの記事もいかがですか?

【jQuery】イメージスライダーの作り方

今回はjQueryを使ってイメージスライダーを作ってみたいと思います。 ついついプラグインを使いがちですが自分で作ったほうがカスタマイズしやすいのでなるべく自分で作りたいところですね! もくじ1 HTML2 JavaSc […]

XAMPPのセキュリティ設定をわかりやすく解説!

前回の記事「WordPress構築のためにMacでXAMPPをインストールしてみた」でMacにXAMPPをインストールしました。 今回はXAMPPを使う前にやっておいた方がいいセキュリティ設定をしていきたいと思います。 […]

WordPressでオリジナル画像のSNSボタンを作る方法

WordPressでブログを作る時に必要なのがSNSボタン。 このSNSボタンがないとユーザーに拡散してもらえません。 今の時代、SNSでの拡散は必須ですね。 今回は、以下4種類のオリジナル画像のSNSボタンを作る方法を […]

Profile

HONU

Honu

どうも、Web制作に詳しい人です。デザイン含めてフロントエンド周りをいじるのが好きです。何やらいろいろな記事を書いてきましたがこれからはなるべくWeb制作の話中心に記事を書いていこうと思ってますのでよかったら見ていってください。

詳しいプロフィールはこちら

ホヌログ

Webフロントエンジニアのブログ