jquery hover仿海信官网带缩略图下拉导航菜单代码



119 472 158



特效描述:带缩略图导航 下拉导航菜单,

代码结构

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

加群请备注:从官网了解到