以下是 jquery海信官网带缩略图下拉导航菜单js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery海信官网带缩略图下拉导航菜单</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<div class="header">
<a href="#" class="logo fleft"><img src="images/logo.gif" /></a>
<div class="nav fleft">
<ul>
<li class="nav_i r_ind_nav">
<span><a href="#">个人消费品</a></span>
<div class="nav2">
<ul>
<li>
<a href="#">电视</a>
<div class="nav2_1">
<dl>
<dd><a href="#"> <img src="images/W020130723573926673807_100.png" width="100" height="100"/><p>智能电视</p></a></dd>
<dd><a href="#"> <img src="images/W020130801393613513132_100.png" width="100" height="100"/><p>3D电视</p></a></dd>
<dd><a href="#"> <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="#">手机</a>
<div class="nav2_1">
<dl>
<dd><a href="#"> <img src="images/W020130807364576716983_100.png" width="100" height="100"/><p>CDMA(电信)</p></a></dd>
<dd><a href="#"> <img src="images/W020130807367378553630_100.png" width="100" height="100"/><p>TD(移动)</p></a></dd>
<dd><a href="#"> <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="#">I'TV</a></li>
<li><a href="#">I'BOX</a></li>
<li>
<a href="#">冰箱冷柜</a>
<div class="nav2_1">
<dl>
<dd><a href="#"> <img src="images/W020130723676771119285_100.png" width="100" height="100"/><p>对开门冰箱</p></a></dd>
<dd><a href="#"> <img src="images/W020130723676771940479_100.png" width="100" height="100"/><p>多门冰箱</p></a></dd>
<dd><a href="#"> <img src="images/W020130731788285749088_100.png" width="100" height="100"/><p>三门冰箱</p></a></dd>
<dd><a href="#"> <img src="images/W020130731842700917269_100.png" width="100" height="100"/><p>两门冰箱</p></a></dd>
<dd><a href="#"> <img src="images/W020130723676773959149_100.png" width="100" height="100"/><p>单门冰箱</p></a></dd>
<dd><a href="#"> <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="#">空调</a>
<div class="nav2_1">
<dl>
<dd><a href="#"> <img src="images/W020130731780031437250_100.png" width="100" height="100"/><p>苹果派A8系列</p></a></dd>
<dd><a href="#"> <img src="images/W020130731780138341453_100.png" width="100" height="100"/><p>壁挂式空调</p></a></dd>
<dd><a href="#"> <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="#">洗衣机</a>
<div class="nav2_1">
<dl>
<dd><a href="#"> <img src="images/P020130724356970350835.jpg" width="100" height="100" /><p>波轮</p></a></dd>
<dd><a href="#"> <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="#">生活电器</a>
<div class="nav2_1">
<dl>
<dd><a href="#"> <img src="images/P020130729484847752747.jpg" width="100" height="100" /><p>豆浆机</p></a></dd>
<dd><a href="#"> <img src="images/P020130724361655594579.jpg" width="100" height="100" /><p>电饭煲</p></a></dd>
<dd><a href="#"> <img src="images/P020130724361846287825.jpg" width="100" height="100" /><p>电磁炉</p></a></dd>
<dd><a href="#"> <img src="images/P020130724362043329494.jpg" width="100" height="100" /><p>电压力锅</p></a></dd>
<dd><a href="#"> <img src="images/P020130724362299593737.jpg" width="100" height="100" /><p>电水壶</p></a></dd>
<dd><a href="#"> <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="#">商用产品与解决方案</a></span>
<div class="nav2 nav2_hover">
<ul>
<li><a href="http://#">酒店电视</a></li>
<li><a href="http://#">家用中央空调</a></li>
<li><a href="http://#">商用中央空调</a></li>
<li><a href="#">机顶盒</a></li>
<li><a href="#" target="_blank">智能商用设备</a></li>
<li class="r_nav_none"><a href="#">商用解决方案</a></li>
</ul>
</div>
</li>
<li class="nav_i">
<span><a href="#">服务与支持</a></span>
<div class="nav2 nav2_hover">
<ul>
<li><a href="#">服务综述</a></li>
<li><a href="#">在线报修</a></li>
<li><a href="#">产品注册</a></li>
<li><a href="#">下载中心</a></li>
<li><a href="#">产品知识</a></li>
<li><a href="#">手机服务商</a></li>
<li><a href="#">服务进度查询</a></li>
<li class="r_nav_none"><a href="#">服务资讯</a></li>
</ul>
</div>
</li>
<li class="nav_i">
<span><a href="#">新闻与活动</a></span>
<div class="nav2 nav2_hover">
<ul>
<li><a href="#">新闻资讯</a></li>
<li><a href="#">市场活动</a></li>
<li class="r_nav_none"><a href="#">视频报道</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>
</body>
</html>
CSS代码(style.css):
@charset "utf-8";/* base */
body{font-family:"微软雅黑",Arial,Helvetica,sans-serif;font-size:12px;font-style:normal;line-height:22px;font-weight:normal;font-variant:normal;color:#666;background:url(../images/bj_line.jpg) repeat-x left top;}
body,ul,dl,dd,dt,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,img,td,div,input{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
a{outline-style:none;color:#666;text-decoration:none;border:0px;}
a:hover{text-decoration:none;color:#04999a;}
input,select,textarea{font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#666}
img{border:0;}
li{list-style-type:none;vertical-align:0}
.hidden{display:none;}
.fleft{float:left}
.fright{float:right}
.fleft_impt{float:left!important;}
.pr{position:relative;}
.pa{position:absolute}
.clear{clear:both;height:0;line-height:0;overflow:hidden;font-size:0;}
textarea{resize:none;}
.f12{font-size:12px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f18{font-size:18px;}
.f22{font-size:22px;}
.f24{font-size:24px;}
.fbold{font-weight:700}
/* header */
.logo{width:114px;height:18px;}
.header{padding-top:16px;height:86px;position:relative;z-index:50;width:963px;margin:0 auto;_float:left;}
.nav{margin-left:50px;display:inline;height:36px;_width:560px;_float:left;}
.nav li{float:left;font-size:18px;cursor:pointer;margin-right:40px;_margin-right:30px;height:36px;display:inline}
.nav li a,.nav li a:hover{color:#666}
.header .sreach{width:202px;float:right}
.sreach input{width:140px;padding-left:5px;height:23px;line-height:23px;border:1px solid #e0e0e0;color:#b4b4b4;margin-left:10px;display:inline;overflow:hidden;}
.sreach a{width:24px;height:23px;display:inline-block;text-align:center;line-height:25px;color:#fff!important;font-weight:700;overflow:hidden;background:url(../images/sear_a.gif) no-repeat;border:1px solid #e0e0e0;border-left:0px;}
.nav_1{height:37px;line-height:37px;}
.nav_1 a,.nav_1 span{float:left;margin-right:5px;color:#74848a}
.nav_1 a:hover{text-decoration:underline}
.nav_1 span{font-family:宋体}
.nav2{height:55px;width:963px;position:absolute;left:0;top:52px;_top:52px;}
.nav2 li{font-size:12px;line-height:50px;height:55px;margin-right:0;float:left;background:url(../images/nav_line.gif) no-repeat right center;width:120px;}
.nav2 li.r_nav_none{background:none}
.nav2 li a{color:#fff;display:block;margin-bottom:5px;text-align:center;}
.nav2 li a:hover{color:#fff;}
.nav2 li.r_i_xuan_z a,.nav2 li.r_i_xuan_z a:hover{color:#00A9A7;}
.nav2 li.r_i_xuan_z{background:url(../images/r_i_xuan.gif) no-repeat 5px 5px}
.r_ind_nav span{color:#00a9a7;height:36px;display:block;background:url(../images/r_ind_bi.gif) no-repeat center bottom;float:left;white-space:normal}
.r_ind_nav span a,.r_ind_nav span a:hover{color:#00a9a7;}
.nav2{display:none}
.r_ind_nav .nav2{display:block}
.nav2_1{width:980px;height:200px;background:url(../images/index_nav_1.png) no-repeat center bottom;padding-top:30px;display:none;position:absolute;left:-5px;}
.nav2_1 dl{_width:980px;_height:140px;}
.nav2_1 dd{border-right:1px solid #ececec;width:159px;height:140px;float:left;text-align:center}
.nav2_1 dd img{width:100px;height:100px;}
.nav2_1 dd.r_windex{border:none}
.nav2 li .nav2_1 dd a{color:#333;font-size:12px;}
.nav2 li.r_i_xuan_z .nav2_1 dd a:hover{color:#00a9a7;}
.r_pohne{background:url(../images/r_i_img.gif) no-repeat center left;height:32px;line-height:32px;padding-left:40px;font-size:15px;float:right;margin:5px 20px 0 0;display:inline;_margin-top:-5px;}
.nav2_hover{height:50px;overflow:hidden;}
.nav2_hover ul{width:720px;margin:0 auto}
.nav2_hover ul li{width:auto;padding:0 22px;}
.nav2_hover li a{text-align:center}
.nav2_hover li.r_i_xuan_z{background:url(../images/nav_hover.png) no-repeat left top;}
.nav2_hover li.r_i_xuan_z a,.nav2_hover li.r_i_xuan_z a:hover{color:#fff;}
分享到QQ
分享到微博
微信扫一扫
