以下是 仿爱淘宝分类伸缩jQuery导航特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仿爱淘宝分类伸缩jQuery导航</title>
<link href="css/zzsc.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('.navRight li').mouseenter(function(){
$(this).children('span').css('transform','rotate(135deg)');
}).mouseleave(function(){
$(this).children('span').css('transform','rotate(-45deg)');
})
$('.fenlei ul li').mouseenter(function(){
$(this).stop().animate({'height':'289px'},300).siblings().stop().animate({'height':'44px'},300);
$(this).siblings().css('background','#F5F5F5');
$('.fenleiright').fadeTo(0,0.8).stop().animate({'width':'289px'},300);
}).mouseleave(function(){
$('.fenlei ul li').stop().animate({'height':'79px'},300)
$(this).siblings().css('background','#ffffff');
});
$('.navLeft').mouseleave(function(){
$('.fenleiright').stop().animate({'width':'0px'},300);
})
})
</script>
</head>
<body>
<div id="navOut">
<div class="nav">
<div class="navLeft">
<p>商品类目</p>
<div class="fenlei">
<ul>
<li>
<dl class="fenleiLeft">
<dt>男人</dt>
<dd>
<a href="#">内容</a>
<a href="#">内容</a>
<a href="#">内容</a>
<a href="#">内容</a>
<a href="#">内容</a>
<a href="#">内容</a>
<a href="#">内容</a>
<a href="#">内容</a>
<a href="#">内容</a>
<a href="#">内容</a>
<a href="#">内容</a>
<a href="#">内容</a>
<a href="#">内容</a>
<a href="#">内容</a>
<a href="#">内容</a>
<a href="#">内容</a>
<a href="#">内容</a>
<a href="#">内容</a>
<a href="#">内容</a>
<a href="#">内容</a>
<a href="#">内容</a>
<a href="#">内容</a>
<a href="#">内容</a>
<a href="#">内容</a>
</dd>
</dl>
</li>
<li>
<dl class="fenleiLeft">
<dt>美食</dt>
<dd>
<a href="#">男鞋</a><a href="#">男裤</a>
<a href="#">手表</a><a href="#">男卫衣</a>
<a href="#">nb男鞋</a><a href="#">打底衫</a>
<a href="#">拖鞋</a><a href="#">睡衣</a>
<a href="#">男运动鞋</a><a href="#">山地车</a>
<a href="#">男皮带</a>
<a href="#">运动裤</a><a href="#">男棉裤</a>
<a href="#">以纯男T恤包</a><a href="#">情侣装</a>
<a href="#">男保暖裤</a><a href="#">运动鞋</a>
<a href="#">男乔丹4代跑鞋</a>
<a href="#">腰带</a><a href="#">男旅行箱</a>
<a href="#">气垫鞋</a><a href="#">板鞋</a>
<a href="#">温暖一家之主De冬日风采</a><a href="#">羽绒服羽绒服中的小立领</a>
<a href="#">皮衣潮男装</a>
</dd>
</dl>
</li>
<li>
<dl class="fenleiLeft">
<dt>女人</dt>
<dd>
<a href="#">男鞋</a><a href="#">男裤</a>
<a href="#">手表</a><a href="#">男卫衣</a>
<a href="#">nb男鞋</a><a href="#">打底衫</a>
<a href="#">拖鞋</a><a href="#">睡衣</a>
<a href="#">男运动鞋</a><a href="#">山地车</a>
<a href="#">男皮带</a>
<a href="#">运动裤</a><a href="#">男棉裤</a>
<a href="#">以纯男T恤包</a><a href="#">情侣装</a>
<a href="#">男保暖裤</a><a href="#">运动鞋</a>
<a href="#">男乔丹4代跑鞋</a>
<a href="#">腰带</a><a href="#">男旅行箱</a>
<a href="#">气垫鞋</a><a href="#">板鞋</a>
<a href="#">温暖一家之主De冬日风采</a><a href="#">羽绒服羽绒服中的小立领</a>
<a href="#">皮衣潮男装</a>
</dd>
</dl>
</li>
<li>
<dl class="fenleiLeft">
<dt>数码</dt>
<dd>
<a href="#">男鞋</a><a href="#">男裤</a>
<a href="#">手表</a><a href="#">男卫衣</a>
<a href="#">nb男鞋</a><a href="#">打底衫</a>
<a href="#">拖鞋</a><a href="#">睡衣</a>
<a href="#">男运动鞋</a><a href="#">山地车</a>
<a href="#">男皮带</a>
<a href="#">运动裤</a><a href="#">男棉裤</a>
<a href="#">以纯男T恤包</a><a href="#">情侣装</a>
<a href="#">男保暖裤</a><a href="#">运动鞋</a>
<a href="#">男乔丹4代跑鞋</a>
<a href="#">腰带</a><a href="#">男旅行箱</a>
<a href="#">气垫鞋</a><a href="#">板鞋</a>
<a href="#">温暖一家之主De冬日风采</a><a href="#">羽绒服羽绒服中的小立领</a>
<a href="#">皮衣潮男装</a>
</dd>
</dl>
</li>
<li>
<dl class="fenleiLeft">
<dt>家具</dt>
<dd>
<a href="#">男鞋</a><a href="#">男裤</a>
<a href="#">手表</a><a href="#">男卫衣</a>
<a href="#">nb男鞋</a><a href="#">打底衫</a>
<a href="#">拖鞋</a><a href="#">睡衣</a>
<a href="#">男运动鞋</a><a href="#">山地车</a>
<a href="#">男皮带</a>
<a href="#">运动裤</a><a href="#">男棉裤</a>
<a href="#">以纯男T恤包</a><a href="#">情侣装</a>
<a href="#">男保暖裤</a><a href="#">运动鞋</a>
<a href="#">男乔丹4代跑鞋</a>
<a href="#">腰带</a><a href="#">男旅行箱</a>
<a href="#">气垫鞋</a><a href="#">板鞋</a>
<a href="#">温暖一家之主De冬日风采</a><a href="#">羽绒服羽绒服中的小立领</a>
<a href="#">皮衣潮男装</a>
</dd>
</dl>
</li>
<li>
<dl class="fenleiLeft">
<dt>母婴</dt>
<dd>
<a href="#">男鞋</a><a href="#">男裤</a>
<a href="#">手表</a><a href="#">男卫衣</a>
<a href="#">nb男鞋</a><a href="#">打底衫</a>
<a href="#">拖鞋</a><a href="#">睡衣</a>
<a href="#">男运动鞋</a><a href="#">山地车</a>
<a href="#">男皮带</a>
<a href="#">运动裤</a><a href="#">男棉裤</a>
<a href="#">以纯男T恤包</a><a href="#">情侣装</a>
<a href="#">男保暖裤</a><a href="#">运动鞋</a>
<a href="#">男乔丹4代跑鞋</a>
<a href="#">腰带</a><a href="#">男旅行箱</a>
<a href="#">气垫鞋</a><a href="#">板鞋</a>
<a href="#">温暖一家之主De冬日风采</a><a href="#">羽绒服羽绒服中的小立领</a>
<a href="#">皮衣潮男装</a>
</dd>
</dl>
</li>
<li>
<dl class="fenleiLeft">
<dt>美妆</dt>
<dd>
<a href="#">男鞋</a><a href="#">男裤</a>
<a href="#">手表</a><a href="#">男卫衣</a>
<a href="#">nb男鞋</a><a href="#">打底衫</a>
<a href="#">拖鞋</a><a href="#">睡衣</a>
<a href="#">男运动鞋</a><a href="#">山地车</a>
<a href="#">男皮带</a>
<a href="#">运动裤</a><a href="#">男棉裤</a>
<a href="#">以纯男T恤包</a><a href="#">情侣装</a>
<a href="#">男保暖裤</a><a href="#">运动鞋</a>
<a href="#">男乔丹4代跑鞋</a>
<a href="#">腰带</a><a href="#">男旅行箱</a>
<a href="#">气垫鞋</a><a href="#">板鞋</a>
<a href="#">温暖一家之主De冬日风采</a><a href="#">羽绒服羽绒服中的小立领</a>
<a href="#">皮衣潮男装</a>
</dd>
</dl>
</li>
</ul>
</div>
<div class="fenleiright">
<dl class="flright">
<dt>上衣</dt>
<dd>
<a href="#">白衬衫 </a>
<a href="#">潮牌</a>
<a href="#">雪纺衫</a>
<a href="#">班服</a>
<a href="#">宽松上衣</a>
<a href="#">胖人装</a>
<a href="#">棉衬衫</a>
<a href="#">学院风</a>
<a href="#"> 中长款装</a>
</dd>
</dl>
<dl class="flright">
<dt>下装</dt>
<dd>
<a href="#">白衬衫 </a>
<a href="#">潮牌</a>
<a href="#">雪纺衫</a>
<a href="#">班服</a>
<a href="#">宽松上衣</a>
<a href="#">胖人装</a>
<a href="#">棉衬衫</a>
<a href="#">学院风</a>
<a href="#"> 中长款装</a>
</dd>
</dl>
<dl class="flright">
<dt>鞋子</dt>
<dd>
<a href="#">白衬衫 </a>
<a href="#">潮牌</a>
<a href="#">雪纺衫</a>
<a href="#">班服</a>
<a href="#">宽松上衣</a>
<a href="#">胖人装</a>
<a href="#">棉衬衫</a>
<a href="#">学院风</a>
<a href="#"> 中长款装</a>
</dd>
</dl>
<dl class="flright">
<dt>内衣</dt>
<dd>
<a href="#">白衬衫 </a>
<a href="#">潮牌</a>
<a href="#">雪纺衫</a>
<a href="#">班服</a>
<a href="#">宽松上衣</a>
<a href="#">胖人装</a>
<a href="#">棉衬衫</a>
<a href="#">学院风</a>
<a href="#"> 中长款装</a>
</dd>
</dl>
<dl class="flright">
<dt>帽子</dt>
<dd>
<a href="#">白衬衫 </a>
<a href="#">潮牌</a>
<a href="#">雪纺衫</a>
<a href="#">班服</a>
<a href="#">宽松上衣</a>
<a href="#">胖人装</a>
<a href="#">棉衬衫</a>
<a href="#">学院风</a>
<a href="#"> 中长款装</a>
</dd>
</dl>
</div>
</div>
<ul class="navRight">
<li><a href="#">单品</a><span></span></li>
<li><a href="#">特惠</a></li>
<li><a href="#">搭配</a></li>
<li><a href="#">专辑</a><span></span></li>
<li><a href="#">主题</a><span></span></li>
<li><a href="#">店铺</a></li>
</ul>
</div>
</div>
<div id="banner">
<div class="pic">
<img src="img/banner.jpg"/>
</div>
</div>
</body>
</html>
CSS代码(zzsc.css):
*{margin:0;padding:0;list-style:none;border:0;}
body{font-family:"微软雅黑";font-size:12px;background:#FAFAFA;height:1000px;}
a,a:hover{color:#3E3E3E;text-decoration:none;}
#navOut{width:100%;height:40px;border-bottom:1px solid #FA4332;background:#FFFFFF;}
.nav{width:1190px;height:40px;margin:20px auto 0;}
.navLeft{width:290px;height:40px;background:#FA4332;float:left;position:relative;}
.navLeft p{height:40px;line-height:40px;text-align:center;color:#FFFFFF;font-size:14px;}
.nav .navRight{float:left;overflow:hidden;}
.nav .navRight li{float:left;width:90px;height:40px;line-height:40px;text-align:center;font-weight:bold;position:relative;}
.nav .navRight li span{width:5px;height:5px;border-bottom:1px solid #000000;border-left:1px solid #000000;position:absolute;top:15px;left:63px;transform:rotate(-45deg);transition:all 1s;}
.fenlei{width:288px;height:558px;position:absolute;background:#FFFFFF;top:40;left:0;border:1PX solid #EEEEEE;}
.fenlei ul{overflow:hidden;}
.fenlei ul li{overflow:hidden;height:79px;border-bottom:1px solid #EEEEEE;}
.fenleiLeft{overflow:hidden;}
.fenleiLeft dt{width:40px;height:64px;float:left;padding:15px 0 0 15px;font-size:14px;font-weight:bold;}
.fenleiLeft dd{float:left;width:220px;overflow:hidden;}
.fenleiLeft dd a{margin:15px 0 0 12px;float:left;}
.fenleiLeft dd a:hover{color:#f60;}
.fenleiright{width:0px;height:558px;border:1px solid #EEEEEE;border-left:0;background:#FFFFFF;position:absolute;top:40px;left:290px;overflow:hidden;}
#banner{width:100%;height:380px;background:#e50150;}
#banner .pic{width:900px;height:380px;margin:0 auto;padding-left:290px;}
.pic img{display:block;}
.flright{height:90px;padding:20px 0 0 20px;overflow:hidden;}
.flright dt{height:24px;line-height:24px;font-size:14px;font-weight:bold;}
.flright dd{height:66px;overflow:hidden;}
.flright dd a{float:left;padding-right:10px;height:33px;line-height:33px;}
.flright dd a:hover{color:#f60;}
分享到QQ
分享到微博
微信扫一扫
