jquery hover仿海信官網帶縮略圖下拉導航菜單代碼



124 494 165



特效描述:帶縮略圖導航 下拉導航菜單,

代碼結構

1. 引入CSS

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

2. 引入JS

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

3. HTML代碼

<div class="header">
	<a href="http://www.dijiuzhanzhang.com/" class="logo fleft"><img src="images/logo.gif" /></a>
	<div class="nav fleft">
		<ul>
			<li class="nav_i r_ind_nav">
				<span><a href="http://www.dijiuzhanzhang.com/">個人消費品</a></span>
				<div class="nav2">
					<ul>
						<li>
							<a href="http://www.dijiuzhanzhang.com/">電視</a>
							<div class="nav2_1">
								<dl>
									<dd><a href="http://www.dijiuzhanzhang.com/"> <img src="images/W020130723573926673807_100.png" width="100" height="100"/><p>智能電視</p></a></dd>
									<dd><a href="http://www.dijiuzhanzhang.com/"> <img src="images/W020130801393613513132_100.png" width="100" height="100"/><p>3D電視</p></a></dd>
									<dd><a href="http://www.dijiuzhanzhang.com/"> <img src="images/W020130801375422178789_100.png" width="100" height="100"/><p>LED電視</p></a></dd>
									<div class="clear"></div>
								</dl>
								<div class="r_pohne">客服熱線: 4006 111 111</div>
							</div>
						</li>
						<li>
							<a href="http://www.dijiuzhanzhang.com/">手機</a>
							<div class="nav2_1">
								<dl>
									<dd><a href="http://www.dijiuzhanzhang.com/"> <img src="images/W020130807364576716983_100.png" width="100" height="100"/><p>CDMA(電信)</p></a></dd>
									<dd><a href="http://www.dijiuzhanzhang.com/"> <img src="images/W020130807367378553630_100.png" width="100" height="100"/><p>TD(移動)</p></a></dd>
									<dd><a href="http://www.dijiuzhanzhang.com/"> <img src="images/W020130807367538703894_100.png" width="100" height="100"/><p>WCDMA(聯通)</p></a></dd>
									<div class="clear"></div>
								</dl>
								<div class="r_pohne">客服熱線: 4006 111 111</div>
							</div>
						</li>
						<li><a href="http://www.dijiuzhanzhang.com/">I'TV</a></li>
						<li><a href="http://www.dijiuzhanzhang.com/">I'BOX</a></li>
						<li>
							<a href="http://www.dijiuzhanzhang.com/">冰箱冷柜</a>
							<div class="nav2_1">
								<dl>
									<dd><a href="http://www.dijiuzhanzhang.com/"> <img src="images/W020130723676771119285_100.png" width="100" height="100"/><p>對開門冰箱</p></a></dd>
									<dd><a href="http://www.dijiuzhanzhang.com/"> <img src="images/W020130723676771940479_100.png" width="100" height="100"/><p>多門冰箱</p></a></dd>
									<dd><a href="http://www.dijiuzhanzhang.com/"> <img src="images/W020130731788285749088_100.png" width="100" height="100"/><p>三門冰箱</p></a></dd>
									<dd><a href="http://www.dijiuzhanzhang.com/"> <img src="images/W020130731842700917269_100.png" width="100" height="100"/><p>兩門冰箱</p></a></dd>
									<dd><a href="http://www.dijiuzhanzhang.com/"> <img src="images/W020130723676773959149_100.png" width="100" height="100"/><p>單門冰箱</p></a></dd>
									<dd><a href="http://www.dijiuzhanzhang.com/"> <img src="images/W020130723676774607965_100.png" width="100" height="100"/><p>冷柜</p></a></dd>
									<div class="clear"></div>
								</dl>
								<div class="r_pohne">客服熱線: 4006 111 111</div>
							</div>
						</li>
						<li>
							<a href="http://www.dijiuzhanzhang.com/">空調</a>
							<div class="nav2_1">
								<dl>
									<dd><a href="http://www.dijiuzhanzhang.com/"> <img src="images/W020130731780031437250_100.png" width="100" height="100"/><p>蘋果派A8系列</p></a></dd>
									<dd><a href="http://www.dijiuzhanzhang.com/"> <img src="images/W020130731780138341453_100.png" width="100" height="100"/><p>壁掛式空調</p></a></dd>
									<dd><a href="http://www.dijiuzhanzhang.com/"> <img src="images/W020130731780253264576_100.png" width="100" height="100"/><p>柜式空調</p></a></dd>
									<div class="clear"></div>
								</dl>
								<div class="r_pohne">客服熱線: 4006 111 111</div>
							</div>
						</li>
						<li>
							<a href="http://www.dijiuzhanzhang.com/">洗衣機</a>
							<div class="nav2_1">
								<dl>
									<dd><a href="http://www.dijiuzhanzhang.com/"> <img src="images/P020130724356970350835.jpg" width="100" height="100" /><p>波輪</p></a></dd>
									<dd><a href="http://www.dijiuzhanzhang.com/"> <img src="images/P020130724357192823080.jpg" width="100" height="100" /><p>滾筒</p></a></dd>
									<div class="clear"></div>
								</dl>
								<div class="r_pohne">客服熱線: 4006 111 111</div>
							</div>
						</li>
						<li class="r_nav_none">
							<a href="http://www.dijiuzhanzhang.com/">生活電器</a>
							<div class="nav2_1">
								<dl>
									<dd><a href="http://www.dijiuzhanzhang.com/"> <img src="images/P020130729484847752747.jpg" width="100" height="100" /><p>豆漿機</p></a></dd>
									<dd><a href="http://www.dijiuzhanzhang.com/"> <img src="images/P020130724361655594579.jpg" width="100" height="100" /><p>電飯煲</p></a></dd>
									<dd><a href="http://www.dijiuzhanzhang.com/"> <img src="images/P020130724361846287825.jpg" width="100" height="100" /><p>電磁爐</p></a></dd>
									<dd><a href="http://www.dijiuzhanzhang.com/"> <img src="images/P020130724362043329494.jpg" width="100" height="100" /><p>電壓力鍋</p></a></dd>
									<dd><a href="http://www.dijiuzhanzhang.com/"> <img src="images/P020130724362299593737.jpg" width="100" height="100" /><p>電水壺</p></a></dd>
									<dd><a href="http://www.dijiuzhanzhang.com/"> <img src="images/P020130724362430179223.jpg" width="100" height="100" /><p>掛燙機</p></a></dd>
									<div class="clear"></div>
								</dl>
								<div class="r_pohne">客服熱線: 4006 111 111</div>
							</div>
						</li>
					</ul>
				</div>
			</li>
			<li class="nav_i">
				<span><a href="http://www.dijiuzhanzhang.com/">商用產品與解決方案</a></span>
				<div class="nav2 nav2_hover">
					<ul>
						<li><a href="http://http://www.dijiuzhanzhang.com/">酒店電視</a></li>
						<li><a href="http://http://www.dijiuzhanzhang.com/">家用中央空調</a></li>
						<li><a href="http://http://www.dijiuzhanzhang.com/">商用中央空調</a></li>
						<li><a href="http://www.dijiuzhanzhang.com/">機頂盒</a></li>
						<li><a href="http://www.dijiuzhanzhang.com/" target="_blank">智能商用設備</a></li>
						<li class="r_nav_none"><a href="http://www.dijiuzhanzhang.com/">商用解決方案</a></li>
					</ul>
				</div>
			</li>
			<li class="nav_i">
				<span><a href="http://www.dijiuzhanzhang.com/">服務與支持</a></span>
				<div class="nav2 nav2_hover">
					<ul>
						<li><a href="http://www.dijiuzhanzhang.com/">服務綜述</a></li>
						<li><a href="http://www.dijiuzhanzhang.com/">在線報修</a></li>
						<li><a href="http://www.dijiuzhanzhang.com/">產品注冊</a></li>
						<li><a href="http://www.dijiuzhanzhang.com/">下載中心</a></li>
						<li><a href="http://www.dijiuzhanzhang.com/">產品知識</a></li>
						<li><a href="http://www.dijiuzhanzhang.com/">手機服務商</a></li>
						<li><a href="http://www.dijiuzhanzhang.com/">服務進度查詢</a></li>
						<li class="r_nav_none"><a href="http://www.dijiuzhanzhang.com/">服務資訊</a></li>
					</ul>
				</div>
			</li>
			<li class="nav_i">
				<span><a href="http://www.dijiuzhanzhang.com/">新聞與活動</a></span>
				<div class="nav2 nav2_hover">
					<ul>
						<li><a href="http://www.dijiuzhanzhang.com/">新聞資訊</a></li>
						<li><a href="http://www.dijiuzhanzhang.com/">市場活動</a></li>
						<li class="r_nav_none"><a href="http://www.dijiuzhanzhang.com/">視頻報道</a></li>
					</ul>
				</div>
			</li>
		</ul>
	</div>
	<div class="sreach fright">
		<input type="text" class="fleft" value="請輸入要搜索的內容" onclick="if(this.value=='請輸入要搜索的內容'){this.value='';}" onblur="if(this.value=='')this.value='請輸入要搜索的內容'" onfocus="if(this.value=='請輸入要搜索的內容'){this.value='';}" />
		<a href="javascript:void(0)" onclick="location.href='/hisense/search/hxsearchResult.do?searchword='+encodeURIComponent(jQuery(this).prev().val());" class="fleft"></a>
		<div class="clear"></div>
	</div>
</div>
<script type="text/javascript">
$(".nav .nav_i").hover(function(){
	$(".nav .nav_i").removeClass("r_ind_nav");
	$(this).addClass("r_ind_nav");
});
$(".nav2 li").hover(function(){
	$(this).addClass("r_i_xuan_z");
	$(this).find(".nav2_1").show(); 
},function(){
	$(this).removeClass("r_i_xuan_z");
	$(this).find(".nav2_1").hide(); 
});
</script>



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


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 導航切換 菜單切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

湖北30选5开奖结果走势图表