エフェクト付きメガドロップダウンメニュー 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>