エフェクト付きメガドロップダウンメニュー with jQuery
- : javaScript
- : CSS3 / jQuery / Navigation
- :
中・大規模サイトになると必須になってくるドロップダウンメニュー。この方法だと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>
