エフェクト付きメガドロップダウンメニュー with jQuery

mdd

中・大規模サイトになると必須になってくるドロップダウンメニュー。この方法だとCSSを弄れはサムネイルを並べた画像のメニューも簡単にできます。iOSでも動きますがイベントは変更した方がいいかもしれないです。下のコードは参考にしたOVERLAY EFFECT MENU WITH JQUERYを少し弄って、オーバーレイ用の要素をjQuery側でbodyの最後に追加するようになっています。

Demo OVERLAY EFFECT MENU WITH JQUERY

Code

CSS

#mdd_overlay{
background:#000;
opacity:0;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
display:none;
z-index:100;
}
#mdd_nav_wrap {
width: 720px;
margin-right: auto;
margin-left: auto;
}
/*
-- Level1 -------------------------  */
ul.mdd_lv1 {
position: relative;
list-style:none;
margin:0;
padding:0; 
z-index:200;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
ul.mdd_lv1 li {
float: left;	
}
ul.mdd_lv1 li a {
color:#FFF;
display:block;
padding: 10px;
background-color: #000;	
height:54px;	
width: 240px;
}
ul.mdd_lv1 li a:hover,
ul.mdd_lv1 > li.selected > a {
background-color: #ccc;
}
/*
-- Level2 -------------------------  */
ul.mdd_lv2{
display:none;
position:absolute;
top:54px;
left:0px;
background-color: #fff;
width:720px;
padding:20px;
list-style-position:outside;
color:#000;
margin:0;
}
ul.mdd_lv1 li:hover ul.mdd_lv2 {
display:block;
}
ul.mdd_lv2 li {
margin:0px;
margin-left:20px;
margin-right:20px;
width: 130px;
}
ul.mdd_lv2 li a{
height:auto;
background-color: none;
width: auto;
background-color: #ffffff;
color: #000;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
ul.mdd_lv2 li a:hover{
background-color: #ffffff;
color: #ccc;
}
/*
-- Level3 -------------------------  */
ul.mdd_lv3  {
position:static;
padding:0;
width: auto;
font-size:10px;
margin-left:0px;
}
ul.mdd_lv3 li {
float: none;
margin-bottom:1px;	
width: auto;	
margin-right:0px;
margin-left:0px;
}
ul.mdd_lv3 li a{
color: #000;
width: auto;	
background-color: #ffffff;
}

Js

$(function() {
$('body').append('<div id="mdd_overlay"></div>');  
var $mdd_nav		= $('#mdd_nav');
var $mdd_nav_items	= $mdd_nav.children('li');
var $mdd_overlay		= $('#mdd_overlay');
$mdd_nav_items.bind('mouseenter',function(){
var $this = $(this);
$this.addClass('slided selected');
$this.children('ul').css('z-index','9999').stop(true,true).slideDown(200,function(){
$mdd_nav_items.not('.slided').children('ul').hide();
$this.removeClass('slided');
});
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('selected').children('ul').css('z-index','1');
});
$mdd_nav.bind('mouseenter',function(){
var $this = $(this);
$mdd_overlay.stop(true,true).fadeTo(200, 0.6);
$this.addClass('hovered');
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('hovered');
$mdd_overlay.stop(true,true).fadeTo(200, 0);
$mdd_nav_items.children('ul').hide();
$mdd_overlay.hide();
})
});

html

<div id="mdd_nav_wrap" style="margin-top:120px; margin-bottom:200px;">
<ul id="mdd_nav" class="mdd_lv1">
<li><a href="">ABOUT US</a>
<ul class="mdd_lv2">
<li><a href="">About us 1</a></li>
<li><a href="">About us 2</a></li>
<li><a href="">About us 3</a></li>
<li><a href="">About us 4</a></li>
<li><a href="">About us 5</a></li>
<li><a href="">About us 6</a></li>
<li><a href="">About us 7</a></li>
</ul>
</li>
<li><a href="#">PRODUCTS</a>
<ul class="mdd_lv2">
<li><a href="">PRODUCTS A</a>
<ul class="mdd_lv3">
<li><a href="">PRODUCTS A 1</a></li>
<li><a href="">PRODUCTS A 2</a></li>
<li><a href="">PRODUCTS A 3</a></li>
<li><a href="">PRODUCTS A 4</a></li>
</ul>
</li>
<li><a href="">PRODUCTS B</a>
<ul class="mdd_lv3">
<li><a href="">PRODUCTS B 1</a></li>
<li><a href="">PRODUCTS B 2</a></li>
<li><a href="">PRODUCTS B 3</a></li>
<li><a href="">PRODUCTS B 4</a></li>
</ul>
</li>
<li><a href="">PRODUCTS C</a>
<ul class="mdd_lv3">
<li><a href="">PRODUCTS C 1</a></li>
<li><a href="">PRODUCTS C 2</a></li>
</ul>
</li>
<li><a href="">PRODUCTS D</a>
<ul class="mdd_lv3">
<li><a href="">PRODUCTS D 1</a></li>
<li><a href="">PRODUCTS D 2</a></li>
<li><a href="">PRODUCTS D 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">CONTACT</a>
<ul class="mdd_lv2">
<li><a href="">CONTACT1</a></li>
<li><a href="">CONTACT2</a></li>
</ul>
</li>
<div style="clear:both;"></div>
</ul>
</div>    
  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

2 × three =