基于jQuery實現緩慢彈出下拉導航特效



34 135 46



特效描述:基于jQuery實現 緩慢彈出 下拉導航,基于jQuery實現緩慢彈出下拉導航特效

代碼結構

1. 引入CSS

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

2. 引入JS

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

3. HTML代碼

<div class="nav_menu">
	<div class="nav">
		<div class="list" id="navlist">
			<ul id="navfouce">
				<li><a href="http://51qianduan.com/jiaoben/">公司概況</a></li>   
				<li><a href="http://51qianduan.com/jiaoben/">產品展示</a></li>   
				<li><a href="http://51qianduan.com/jiaoben/">新聞動態</a></li>
				<li><a href="http://51qianduan.com/jiaoben/">營銷網絡</a></li>
				<li><a href="http://51qianduan.com/jiaoben/">照明知識</a></li>   
				<li><a href="http://51qianduan.com/jiaoben/">人力資源</a></li>   
				<li><a href="http://51qianduan.com/jiaoben/">客服中心</a></li>   
				<li><a href="http://51qianduan.com/jiaoben/">聯系我們</a></li>
			</ul>
		</div>
		<div class="box" id="navbox" style="height:0px;opacity:0;overflow:hidden;">
			<div class="cont" style="display:none;">
				<ul class="sublist clearfix">
					<li>
						<h3 class="mcate-item-hd"><span>服飾內衣</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">女裝</a>
							<a href="http://51qianduan.com/jiaoben">男裝</a>
							<a href="http://51qianduan.com/jiaoben">內衣</a>
							<a href="http://51qianduan.com/jiaoben">家居服</a>
							<a href="http://51qianduan.com/jiaoben">配件</a>
							<a href="http://51qianduan.com/jiaoben">羽絨</a>
							<a href="http://51qianduan.com/jiaoben">呢大衣</a>
							<a href="http://51qianduan.com/jiaoben">毛衣</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>鞋 箱包</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">女鞋</a>
							<a href="http://51qianduan.com/jiaoben">男鞋</a>
							<a href="http://51qianduan.com/jiaoben">箱包</a>
							<a href="http://51qianduan.com/jiaoben">女包</a>
							<a href="http://51qianduan.com/jiaoben">男包</a>
							<a href="http://51qianduan.com/jiaoben">旅行箱</a>
							<a href="http://51qianduan.com/jiaoben">錢包 </a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>珠寶、手表</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">飾品</a>
							<a href="http://51qianduan.com/jiaoben">項鏈</a>
							<a href="http://51qianduan.com/jiaoben">珠寶</a>
							<a href="http://51qianduan.com/jiaoben">鉆石</a>
							<a href="http://51qianduan.com/jiaoben">手表</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>化妝品</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">護膚</a>
							<a href="http://51qianduan.com/jiaoben">彩妝</a>
							<a href="http://51qianduan.com/jiaoben">香水</a>
							<a href="http://51qianduan.com/jiaoben">男士</a>
							<a href="http://51qianduan.com/jiaoben">精油</a>
							<a href="http://51qianduan.com/jiaoben">假發</a>
							<a href="http://51qianduan.com/jiaoben">美體</a>
							<a href="http://51qianduan.com/jiaoben">試用服務</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>運動 戶外</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">運動鞋</a>
							<a href="http://51qianduan.com/jiaoben">運動服</a>
							<a href="http://51qianduan.com/jiaoben">運動用品</a>
							<a href="http://51qianduan.com/jiaoben">戶外</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>手機 數碼</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">手機</a>
							<a href="http://51qianduan.com/jiaoben">筆記本</a>
							<a href="http://51qianduan.com/jiaoben">相機</a>
							<a href="http://51qianduan.com/jiaoben">平板電腦</a>
							<a href="http://51qianduan.com/jiaoben">配件</a>
							<a href="http://51qianduan.com/jiaoben">電腦硬件</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>家用電器</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">大家電</a>
							<a href="http://51qianduan.com/jiaoben">影音電器</a>
							<a href="http://51qianduan.com/jiaoben">生活電器</a>
							<a href="http://51qianduan.com/jiaoben">廚房電器</a>
							<a href="http://51qianduan.com/jiaoben">健康護理</a>
							<a href="http://51qianduan.com/jiaoben">剃須刀</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>家具 建材</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">家具</a>
							<a href="http://51qianduan.com/jiaoben">衛浴</a>
							<a href="http://51qianduan.com/jiaoben">地板</a>
							<a href="http://51qianduan.com/jiaoben">燈具</a>
							<a href="http://51qianduan.com/jiaoben">五金</a>
							<a href="http://51qianduan.com/jiaoben">開關</a>
							<a href="http://51qianduan.com/jiaoben">裝修設計</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>家紡 居家</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">家紡</a>
							<a href="http://51qianduan.com/jiaoben">磨毛套件</a>
							<a href="http://51qianduan.com/jiaoben">羽絨被</a>
							<a href="http://51qianduan.com/jiaoben">枕頭</a>
							<a href="http://51qianduan.com/jiaoben">軟飾</a>
							<a href="http://51qianduan.com/jiaoben">居家</a>
							<a href="http://51qianduan.com/jiaoben">廚房</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>食品</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">零食</a>
							<a href="http://51qianduan.com/jiaoben">進口</a>
							<a href="http://51qianduan.com/jiaoben">茶葉</a>
							<a href="http://51qianduan.com/jiaoben">沖飲</a>
							<a href="http://51qianduan.com/jiaoben">酒水</a>
							<a href="http://51qianduan.com/jiaoben">糧油</a>
							<a href="http://51qianduan.com/jiaoben">干貨</a>
							<a href="http://51qianduan.com/jiaoben">生鮮</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>醫藥保健</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">保健</a>
							<a href="http://51qianduan.com/jiaoben">滋補</a>
							<a href="http://51qianduan.com/jiaoben">蛋白粉</a>
							<a href="http://51qianduan.com/jiaoben">阿膠</a>
							<a href="http://51qianduan.com/jiaoben">藥品</a>
							<a href="http://51qianduan.com/jiaoben">血壓儀</a>
							<a href="http://51qianduan.com/jiaoben">計生</a>
							<a href="http://51qianduan.com/jiaoben">體檢</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>母嬰用品</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">玩具</a>
							<a href="http://51qianduan.com/jiaoben">寶寶食品</a>
							<a href="http://51qianduan.com/jiaoben">用品</a>
							<a href="http://51qianduan.com/jiaoben">童裝</a>
							<a href="http://51qianduan.com/jiaoben">孕裝</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>汽車 配件</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">新車</a>
							<a href="http://51qianduan.com/jiaoben">座墊</a>
							<a href="http://51qianduan.com/jiaoben">腳墊</a>
							<a href="http://51qianduan.com/jiaoben">GPS</a>
							<a href="http://51qianduan.com/jiaoben">車衣</a>
							<a href="http://51qianduan.com/jiaoben">洗車機</a>
							<a href="http://51qianduan.com/jiaoben">水槍</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>文化 玩樂</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">電子憑證</a>
							<a href="http://51qianduan.com/jiaoben">圖書</a>
							<a href="http://51qianduan.com/jiaoben">樂器</a>
							<a href="http://51qianduan.com/jiaoben">旅游</a>
							<a href="http://51qianduan.com/jiaoben">鮮花</a>
						</p>
					</li>
				</ul>
			</div>
			<div class="cont" style="display:none;">
				<ul class="sublist clearfix">
					<li>
						<h3 class="mcate-item-hd"><span>服飾內衣</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">女裝</a>
							<a href="http://51qianduan.com/jiaoben">男裝</a>
							<a href="http://51qianduan.com/jiaoben">內衣</a>
							<a href="http://51qianduan.com/jiaoben">家居服</a>
							<a href="http://51qianduan.com/jiaoben">配件</a>
							<a href="http://51qianduan.com/jiaoben">羽絨</a>
							<a href="http://51qianduan.com/jiaoben">呢大衣</a>
							<a href="http://51qianduan.com/jiaoben">毛衣</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>鞋 箱包</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">女鞋</a>
							<a href="http://51qianduan.com/jiaoben">男鞋</a>
							<a href="http://51qianduan.com/jiaoben">箱包</a>
							<a href="http://51qianduan.com/jiaoben">女包</a>
							<a href="http://51qianduan.com/jiaoben">男包</a>
							<a href="http://51qianduan.com/jiaoben">旅行箱</a>
							<a href="http://51qianduan.com/jiaoben">錢包 </a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>珠寶、手表</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">飾品</a>
							<a href="http://51qianduan.com/jiaoben">項鏈</a>
							<a href="http://51qianduan.com/jiaoben">珠寶</a>
							<a href="http://51qianduan.com/jiaoben">鉆石</a>
							<a href="http://51qianduan.com/jiaoben">手表</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>化妝品</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">護膚</a>
							<a href="http://51qianduan.com/jiaoben">彩妝</a>
							<a href="http://51qianduan.com/jiaoben">香水</a>
							<a href="http://51qianduan.com/jiaoben">男士</a>
							<a href="http://51qianduan.com/jiaoben">精油</a>
							<a href="http://51qianduan.com/jiaoben">假發</a>
							<a href="http://51qianduan.com/jiaoben">美體</a>
							<a href="http://51qianduan.com/jiaoben">試用服務</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>運動 戶外</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">運動鞋</a>
							<a href="http://51qianduan.com/jiaoben">運動服</a>
							<a href="http://51qianduan.com/jiaoben">運動用品</a>
							<a href="http://51qianduan.com/jiaoben">戶外</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>手機 數碼</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">手機</a>
							<a href="http://51qianduan.com/jiaoben">筆記本</a>
							<a href="http://51qianduan.com/jiaoben">相機</a>
							<a href="http://51qianduan.com/jiaoben">平板電腦</a>
							<a href="http://51qianduan.com/jiaoben">配件</a>
							<a href="http://51qianduan.com/jiaoben">電腦硬件</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>家用電器</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">大家電</a>
							<a href="http://51qianduan.com/jiaoben">影音電器</a>
							<a href="http://51qianduan.com/jiaoben">生活電器</a>
							<a href="http://51qianduan.com/jiaoben">廚房電器</a>
							<a href="http://51qianduan.com/jiaoben">健康護理</a>
							<a href="http://51qianduan.com/jiaoben">剃須刀</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>家具 建材</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">家具</a>
							<a href="http://51qianduan.com/jiaoben">衛浴</a>
							<a href="http://51qianduan.com/jiaoben">地板</a>
							<a href="http://51qianduan.com/jiaoben">燈具</a>
							<a href="http://51qianduan.com/jiaoben">五金</a>
							<a href="http://51qianduan.com/jiaoben">開關</a>
							<a href="http://51qianduan.com/jiaoben">裝修設計</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>家紡 居家</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">家紡</a>
							<a href="http://51qianduan.com/jiaoben">磨毛套件</a>
							<a href="http://51qianduan.com/jiaoben">羽絨被</a>
							<a href="http://51qianduan.com/jiaoben">枕頭</a>
							<a href="http://51qianduan.com/jiaoben">軟飾</a>
							<a href="http://51qianduan.com/jiaoben">居家</a>
							<a href="http://51qianduan.com/jiaoben">廚房</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>食品</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">零食</a>
							<a href="http://51qianduan.com/jiaoben">進口</a>
							<a href="http://51qianduan.com/jiaoben">茶葉</a>
							<a href="http://51qianduan.com/jiaoben">沖飲</a>
							<a href="http://51qianduan.com/jiaoben">酒水</a>
							<a href="http://51qianduan.com/jiaoben">糧油</a>
							<a href="http://51qianduan.com/jiaoben">干貨</a>
							<a href="http://51qianduan.com/jiaoben">生鮮</a>
						</p>
					</li>
				</ul>
			</div>
			<div class="cont" style="display:none;">
				<ul class="sublist clearfix">
					<li>
						<h3 class="mcate-item-hd"><span>服飾內衣</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">女裝</a>
							<a href="http://51qianduan.com/jiaoben">男裝</a>
							<a href="http://51qianduan.com/jiaoben">內衣</a>
							<a href="http://51qianduan.com/jiaoben">家居服</a>
							<a href="http://51qianduan.com/jiaoben">配件</a>
							<a href="http://51qianduan.com/jiaoben">羽絨</a>
							<a href="http://51qianduan.com/jiaoben">呢大衣</a>
							<a href="http://51qianduan.com/jiaoben">毛衣</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>鞋 箱包</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">女鞋</a>
							<a href="http://51qianduan.com/jiaoben">男鞋</a>
							<a href="http://51qianduan.com/jiaoben">箱包</a>
							<a href="http://51qianduan.com/jiaoben">女包</a>
							<a href="http://51qianduan.com/jiaoben">男包</a>
							<a href="http://51qianduan.com/jiaoben">旅行箱</a>
							<a href="http://51qianduan.com/jiaoben">錢包 </a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>珠寶、手表</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">飾品</a>
							<a href="http://51qianduan.com/jiaoben">項鏈</a>
							<a href="http://51qianduan.com/jiaoben">珠寶</a>
							<a href="http://51qianduan.com/jiaoben">鉆石</a>
							<a href="http://51qianduan.com/jiaoben">手表</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>化妝品</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">護膚</a>
							<a href="http://51qianduan.com/jiaoben">彩妝</a>
							<a href="http://51qianduan.com/jiaoben">香水</a>
							<a href="http://51qianduan.com/jiaoben">男士</a>
							<a href="http://51qianduan.com/jiaoben">精油</a>
							<a href="http://51qianduan.com/jiaoben">假發</a>
							<a href="http://51qianduan.com/jiaoben">美體</a>
							<a href="http://51qianduan.com/jiaoben">試用服務</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>運動 戶外</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">運動鞋</a>
							<a href="http://51qianduan.com/jiaoben">運動服</a>
							<a href="http://51qianduan.com/jiaoben">運動用品</a>
							<a href="http://51qianduan.com/jiaoben">戶外</a>
						</p>
					</li>
				</ul>
			</div>
			<div class="cont" style="display:none;">3<br />3</div>
			<div class="cont" style="display:none;">4<br />3<br />4</div>
			<div class="cont" style="display:none;">5</div>
			<div class="cont" style="display:none;">6<br />3<br />3</div>
			<div class="cont" style="display:none;">7<br />3<br />3<br />3</div>
		</div>
	</div>
</div>
<script type="text/javascript">
(function(){
	var time = null;
	var list = $("#navlist");
	var box = $("#navbox");
	var lista = list.find("a");
	for(var i=0,j=lista.length;i<j;i++){
		if(lista[i].className == "now"){
			var olda = i;
		}
	}
	var box_show = function(hei){
		box.stop().animate({
			height:hei,
			opacity:1
		},400);
	}
	var box_hide = function(){
		box.stop().animate({
			height:0,
			opacity:0
		},400);
	}
	lista.hover(function(){
		lista.removeClass("now");
		$(this).addClass("now");
		clearTimeout(time);
		var index = list.find("a").index($(this));
		box.find(".cont").hide().eq(index).show();
		var _height = box.find(".cont").eq(index).height()+54;
		box_show(_height)
	},function(){
		time = setTimeout(function(){	
			box.find(".cont").hide();
			box_hide();
		},50);
		lista.removeClass("now");
		lista.eq(olda).addClass("now");
	});
	box.find(".cont").hover(function(){
		var _index = box.find(".cont").index($(this));
		lista.removeClass("now");
		lista.eq(_index).addClass("now");
		clearTimeout(time);
		$(this).show();
		var _height = $(this).height()+54;
		box_show(_height);
	},function(){
		time = setTimeout(function(){		
			$(this).hide();
			box_hide();
		},50);
		lista.removeClass("now");
		lista.eq(olda).addClass("now");
	});
})();
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



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


熱門標簽: flash導航菜單 flash導航條 flash導航 flash菜單 flash下拉菜單 flash下拉導航菜單 導航切換 菜單切換 右鍵菜單 滑動導航菜單 滑動導航 滑動菜單 滾動導航菜單 滾動菜單 滾動導航 收縮菜單 收縮導航 h5動畫導航 h5動畫菜單 html5動畫導航 html5動畫菜單 浮動菜單 浮動導航 滾動切換 滾動條切換 滑動選項卡 滑動切換 滑動手風琴 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動星星打分 導航菜單 導航條 菜單欄 導航欄 分類導航 響應式導航條 響應式導航 其他 導航切換 菜單切換 二級菜單 二級導航菜單 二級導航 下拉列表 下拉菜單 下拉導航 下拉導航菜單 下拉菜單導航 響應式下拉菜單 固定導航 固定菜單 導航菜單插件 導航插件 菜單插件 鼠標滑過 鼠標懸停 跟隨鼠標移動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子