jquery浮動遮罩導航菜單鼠標懸停導航遮罩層下拉菜單效果代碼



101 401 134



特效描述:浮動遮罩導航 懸停導航 遮罩層下拉,

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>

3. HTML代碼

<div class="bg_img"><img src="images/1.jpg" alt="background" /></div>
<h1>Duke Fashion<span>Overlay Effect Menu with jQuery</span></h1>
<h2>Welcome to the world of fashion</h2>
<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>
					<li><a href="#">Paris</a></li>
					<li><a href="#">Special Events</a></li>
					<li><a href="#">Runway Show</a></li>
					<li><a href="#">Overview</a></li>
				</ul>
				<ul>
					<li class="oe_heading">Winter 2010</li>
					<li><a href="#">Milano</a></li>
					<li><a href="#">New York</a></li>
					<li><a href="#">Behind the scenes</a></li>
					<li><a href="#">Interview</a></li>
					<li><a href="#">Photos</a></li>
					<li><a href="#">Download</a></li>
				</ul>
				<ul>
					<li class="oe_heading">Categories</li>
					<li><a href="#">Casual</a></li>
					<li><a href="#">Business</a></li>
					<li><a href="#">Underwear</a></li>
					<li><a href="#">Nature Pure</a></li>
					<li><a href="#">Swimwear</a></li>
					<li><a href="#">Evening</a></li>
				</ul>
			</div>
		</li>
		<li><a href="">Projects</a>
			<div style="left:-111px;"><!-- -112px -->
				<ul>
					<li class="oe_heading">Fashion Shows</li>
					<li><a href="#">Milano</a></li>
					<li><a href="#">Paris</a></li>
					<li><a href="#">Berlin</a></li>
					<li><a href="#">New York</a></li>
					<li><a href="#">London</a></li>
				</ul>
				<ul>
					<li class="oe_heading">Events</li>
					<li><a href="#">Fashion Party 2011</a></li>
					<li><a href="#">Evening specials</a></li>
					<li><a href="#">Fashion Day Milano</a></li>
					<li><a href="#">Model Workshops</a></li>
				</ul>
				<ul>
					<li class="oe_heading">Media</li>
					<li><a href="#">Wallpapers</a></li>
					<li><a href="#">Downloads</a></li>
					<li><a href="#">Images</a></li>
					<li><a href="#">Contest 2011</a></li>
					<li><a href="#">Fashion Mania</a></li>
					<li><a href="#">Green Earth Day</a></li>
				</ul>
			</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;">
				<ul>
					<li class="oe_heading">Shows 2010</li>
					<li><a href="#">Milano</a></li>
					<li><a href="#">Paris</a></li>
					<li><a href="#">Berlin</a></li>
					<li><a href="#">New York</a></li>
					<li><a href="#">London</a></li>
				</ul>
				<ul>
					<li class="oe_heading">Shows 2011</li>
					<li><a href="#">Milano</a></li>
					<li><a href="#">Paris</a></li>
					<li><a href="#">Berlin</a></li>
					<li><a href="#">New York</a></li>
					<li><a href="#">London</a></li>
				</ul>
				<ul>
					<li class="oe_heading">Special Events</li>
					<li><a href="#">Fashion Party 2011</a></li>
					<li><a href="#">Fashion Countdown Party 2010</a></li>
					<li><a href="#">Fashion Day Milano</a></li>
					<li><a href="#">Model Workshops</a></li>
				</ul>
			</div>
		</li>
		<li><a href="">Stores</a>
			<div style="left:-447px;">
				<ul>
					<li class="oe_heading">Europe</li>
					<li><a href="#">Milano</a></li>
					<li><a href="#">Paris</a></li>
					<li><a href="#">Berlin</a></li>
					<li><a href="#">London</a></li>
				</ul>
				<ul>
					<li class="oe_heading">Asia</li>
					<li><a href="#">Hong Kong</a></li>
					<li><a href="#">Tokio</a></li>
					<li><a href="#">New Delhi</a></li>
					<li><a href="#">Beijing</a></li>
				</ul>
				<ul>
					<li class="oe_heading">United States</li>
					<li><a href="#">New York</a></li>
					<li><a href="#">Los Angeles</a></li>
					<li><a href="#">Seattle</a></li>
					<li><a href="#">Miami</a></li>
				</ul>
			</div>
		</li>
	</ul>	
</div>
<!-- The JavaScript -->
<script type="text/javascript">
$(function() {
	var $oe_menu		= $('#oe_menu');
	var $oe_menu_items	= $oe_menu.children('li');
	var $oe_overlay		= $('#oe_overlay');
	$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');
	});
	$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();
	})
});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 浮動提示框 浮動菜單 浮動導航
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子