一款使用jQuery制作的下拉菜單鼠標滑過全屏遮罩特效插件。該下拉菜單插件當鼠標滑過菜單項時，會出現一個半透明的全屏遮罩將屏幕遮住，效果十分不錯。HTML菜單使用一個無序列表遮罩，class為oe_overlay的div將用來做全屏遮罩：<div class="oe_wrapper"> <div id="oe_overlay" class="oe_overlay"></div> <ul id="oe_menu" class="oe_menu"> <li> <a href="">Collections</a> <div> <ul> <li class="oe_heading"> Summer 2011 </li> <li><a href="#">Milano</a></li> ... </ul> <ul> ... </ul> <ul> ... </ul> </div> </li> <li> <a href="">Projects</a> <div style="left:-111px;"> ... </div> </li> <li> <a href="">Fragrances</a> <div style="left:-223px;"> <ul class="oe_full"> <li class="oe_heading"> Fashion Fragrances </li> <li><a href="#">Deálure</a></li> <li><a href="#">Violet Woman</a></li> <li><a href="#">Deep Blue for Men</a></li> <li><a href="#">New York, New York</a></li> <li><a href="#">Illusion</a></li> </ul> </div> </li> <li><a href="">Events</a> <div style="left:-335px;"> ... </div> </li> <li><a href="">Stores</a> <div style="left:-447px;"> ... </div> </li> </ul></div>
JAVASCRIPT首先設置一下變量參數：var $oe_menu = $('#oe_menu');var $oe_menu_items = $oe_menu.children('li');var $oe_overlay = $('#oe_overlay');當鼠標hover任何的菜單項時，將為它添加classslided和selected。這時相應的二級菜單將從上邊滑出，其他的將回縮。這里將二級菜單的z-index設置為一個很大的數。當鼠標移出菜單，將去除classselected。$oe_menu_items.bind('mouseenter',function(){ var $this = $(this); $this.addClass('slided selected'); $this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){ $oe_menu_items.not('.slided').children('div').hide(); $this.removeClass('slided'); });}).bind('mouseleave',function(){ var $this = $(this); $this.removeClass('selected').children('div').css('z-index','1');});下面來看一下遮罩層的代碼。將遮罩層的透明度調整到0.6，并在wrapper上添加classhovered，這樣菜單仍然顯示是白色的。$oe_menu.bind('mouseenter',function(){ var $this = $(this); $oe_overlay.stop(true,true).fadeTo(200, 0.6); $this.addClass('hovered');}).bind('mouseleave',function(){ var $this = $(this); $this.removeClass('hovered'); $oe_overlay.stop(true,true).fadeTo(200, 0); $oe_menu_items.children('div').hide();})
