以下是 改图网左侧弹出二级导航jQuery特效代码 的示例演示效果:
部分效果截图:
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 rel="stylesheet" href="css/index.css" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>
</head>
<body>
<div class="nav-wrap">
<div class="nav">
<div class="goods">
<div>
<h2> <a>商品分类</a> </h2>
</div>
<div class="all-goods">
<div class="item btnone">
<div class="product">
<h3> <a href="#">LOGO</a> </h3>
<s style="display:block;"></s> </div>
<div class="product-wrap posone">
<!--LOGO-->
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="#">LOGO</a></h2>
<p class="lh30">两大超值套餐任选，最低只需588元。</p>
<ul class="cf">
<li> <a href="#" target="_blank">LOGO设计</a> </li>
<li> <a href="#" target="_blank">LOGO案例</a> </li>
<li> <a href="#" target="_blank">LOGO常识</a> </li>
<li> <a href="#" target="_blank">VI常识</a> </li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd id="logoads"><a href="#" target="_blank" title="logo"><img src="images/0931524708.jpg"></a></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<div class="product">
<h3> <a href="#">名片</a> </h3>
<s></s> </div>
<div class="product-wrap postwo">
<!--名片-->
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="#">名片</a></h2>
<p class="lh30">免费在线设计，印刷低至3.8元/盒，全国包邮。</p>
<ul class="cf">
<li> <a href="#" target="_blank">名片设计</a> </li>
<li> <a href="#" target="_blank">名片印刷</a> </li>
<li> <a href="#" target="_blank">名片模板</a> </li>
<li> <a href="#" target="_blank">名片欣赏</a> </li>
<li> <a href="#" target="_blank">名片常识</a> </li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd id="mpads"><a href="#" target="_blank" title="logo"><img src="images/0931224551.jpg"></a></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<div class="product">
<h3> <a href="#">宣传单</a> </h3>
<s></s> </div>
<div class="product-wrap posthree">
<!--宣传单-->
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="#">宣传单</a></h2>
<p class="lh30">快速设计，高效印刷，省心更放心。</p>
<ul class="cf">
<li> <a href="#" target="_blank">宣传单设计</a> </li>
<li> <a href="#" target="_blank">宣传单印刷</a> </li>
<li> <a href="#" target="_blank">宣传单模板</a> </li>
<li> <a href="#" target="_blank">宣传单常识</a> </li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd id="xcdads"><a href="#" target="_blank" title="宣传单"><img src="images/0935017257.jpg"></a></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<div class="product">
<h3> <a href="#">画册</a> </h3>
<s></s> </div>
<div class="product-wrap posfour">
<!--画册-->
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="#">画册</a></h2>
<p class="lh30">专业设计师提供多种设计方案，设计印刷一站式。</p>
<ul class="cf">
<li> <a href="#" target="_blank">画册设计</a> </li>
<li> <a href="#" target="_blank">画册印刷</a> </li>
<li> <a href="#" target="_blank">画册欣赏</a> </li>
<li> <a href="#" target="_blank">画册常识</a> </li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd id="huaceads"><a href="#" target="_blank" title="画册"><img src="images/0933307415.jpg"></a></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<div class="product">
<h3> <a href="#">优惠券</a> </h3>
<s></s> </div>
<div class="product-wrap posfive">
<!--优惠券-->
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="#">优惠券</a></h2>
<p class="lh30">设计18元起，印刷低至0.1元/张，全国包邮。</p>
<ul class="cf">
<li> <a href="#" target="_blank">优惠券设计</a> </li>
<li> <a href="#" target="_blank">优惠券印刷</a> </li>
<li> <a href="#" target="_blank">优惠券模板</a> </li>
<li> <a href="#" target="_blank">优惠券常识</a> </li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd id="yhqads"><a href="#" target="_blank" title="优惠券"><img src="images/0937077379.jpg"></a></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<div class="product">
<h3> <a href="#">会员卡</a> </h3>
<s></s> </div>
<div class="product-wrap possix">
<!--会员卡-->
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="#">会员卡</a></h2>
<p class="lh30">PVC卡/贵宾卡/购物卡/礼品卡定制，快速设计18元起。</p>
<ul class="cf">
<li> <a href="#" target="_blank">会员卡设计</a> </li>
<li> <a href="#" target="_blank">会员卡定制</a> </li>
<li> <a href="#" target="_blank">会员卡模板</a> </li>
<li> <a href="#" target="_blank">会员卡常识</a> </li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd id="hykads"><a href="#" target="_blank" title="会员卡"><img src="images/0933565639.jpg"></a></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<div class="product">
<h3> <a href="#">不干胶贴</a> </h3>
<s></s> </div>
<div class="product-wrap posseven">
<!--不干胶贴-->
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="#">不干胶贴</a></h2>
<p class="lh30">铜版纸不干胶贴，快速设计印刷。</p>
<ul class="cf">
<li> <a href="#" target="_blank">不干胶贴设计</a> </li>
<li> <a href="#" target="_blank">不干胶贴印刷</a> </li>
<li> <a href="#" target="_blank">不干胶贴模板</a> </li>
<li> <a href="#" target="_blank">不干胶贴常识</a> </li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd id="bgjads"><a href="#" target="_blank" title="不干胶贴"><img src="images/0932237986.jpg"></a></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<div class="product">
<h3> <a href="#">手提袋</a> </h3>
<s></s> </div>
<div class="product-wrap poseight">
<!--手提袋-->
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="#">手提袋</a></h2>
<p class="lh30">纸质手提袋定制，设计印刷全部搞定。</p>
<ul class="cf">
<li> <a href="#" target="_blank">手提袋设计</a> </li>
<li> <a href="#" target="_blank">手提袋印刷</a> </li>
<li> <a href="#" target="_blank">手提袋模板</a> </li>
<li> <a href="#" target="_blank">手提袋常识</a> </li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd id="stdads"><a href="#" target="_blank" title="手提袋"><img src="images/0934218124.jpg"></a></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<div class="product">
<h3> <a href="#">封套</a> </h3>
<s></s> </div>
<div class="product-wrap posnine">
<!--封套-->
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="#">封套</a></h2>
<p class="lh30">提供大量设计模板，设计印刷一站式解决。</p>
<ul class="cf">
<li> <a href="#" target="_blank">封套设计</a> </li>
<li> <a href="#" target="_blank">封套印刷</a> </li>
<li> <a href="#" target="_blank">封套模板</a> </li>
<li> <a href="#" target="_blank">封套常识</a> </li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd id="ftads"><a href="#" target="_blank" title="封套"><img src="images/0932539383.jpg"></a></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<div class="product">
<h3> <a href="#">喜帖</a> </h3>
<s></s> </div>
<div class="product-wrap posten">
<!--喜帖-->
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="#">喜帖</a></h2>
<p class="lh30">时尚照片喜帖，上传照片自主DIY。</p>
<ul class="cf">
<li> <a href="#" target="_blank">喜帖设计</a> </li>
<li> <a href="#" target="_blank">喜帖模板</a> </li>
<li> <a href="#" target="_blank">喜帖常识</a> </li>
<li> <a href="#" target="_blank">喜帖常见问题</a> </li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd id="xitieads"><a href="#" target="_blank" title="喜帖"><img src="images/0934415585.jpg"></a></dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<ul class="nav-list cf">
<li> <a href="#">首页</a> </li>
<li> <a href="#">优惠活动</a> </li>
<li> <a class="on" href="#">内容</a> </li>
<li> <a href="#">内容</a> </li>
<li> <a href="#">JS代码</a> </li>
<li> <a href="#">关于我们</a> </li>
<li> <a href="#">联系我们</a> </li>
<li> <a href="#">在线留言</a> </li>
</ul>
</div>
</div>
</body>
</html>
JS代码(zzsc.js):
$(function(){
//商品分类$('.all-goods .item').hover(function(){
$(this).addClass('active').find('s').hide();
$(this).find('.product-wrap').show();
}
,function(){
$(this).removeClass('active').find('s').show();
$(this).find('.product-wrap').hide();
}
);
}
);
CSS代码(index.css):
/*reset*/
html,body,p,h1,h2,h3,h4,h5,h6,form,input,textarea,select,button,fieldset,legend,img,ul,ol,li,dl,dt,dd,th,td,pre,blockquote{margin:0;padding:0}
html{height:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
body{background-color:#fafafa;color:#666;min-height:100%;height:auto!important;height:100%}
body,button,input,select,textarea,h1,h2,h3,h4,h5,h6{font:12px/1 "宋体","Microsoft Yahei",arial,simhei}
table{border-collapse:collapse;border-spacing:0}
img,fieldset{border:0;vertical-align:middle}
a{text-decoration:none}
a:visited{}
a:hover{text-decoration:underline}
a:active{}
ul,li,ol{list-style:none}
strong,b{font-weight:normal}
em,i{font-style:normal}
iframe{display:block}
fieldset{border:1px solid #c0c0c0;margin:0 2px 18px;padding:0.35em 0.625em 0.75em}
legend{border:0;padding:0;white-space:normal;*margin-left:-7px}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
s{text-decoration:none;}
/*public*/
.cf:after{content:"";clear:both;display:block;height:0;overflow:hidden}
.cf{zoom:1}
.fl{display:inline;float:left}
.fr{display:inline;float:right}
.lh36{line-height:36px}
.lh30{line-height:30px}
.pl20{padding-left:20px}
h2{font-family:"microsoft yahei";font-size:14px;}
.wd240{width:240px;}
.wd252{width:232px;}
.ht399{height:399px;}
.ht14{height:14px;}
.lh33{line-height:33px;}
.lh23{line-height:23px;}
.lh12{line-height:12px;}
.pb10{padding-bottom:10px;}
.pb20{padding-bottom:20px;}
.pr20{padding-right:20px;}
.wd204{width:204px;}
.wd443{width:443px;}
.wd185{width:185px;}
.ml19{margin-left:19px;}
.pt30{padding-top:30px;}
.pb12{padding-bottom:12px;}
.bt{border-top:1px solid #eae7e7;}
.gray{color:#999;}
.blee{border-left:1px solid #eeeeee;}
.fwblod{font-weight:bold;}
.nav-wrap{position:relative;*z-index:2;width:100%;background:#ff6600;}
.nav{position:relative;width:770px;height:40px;margin:0 auto;padding-left:190px;}
.goods{position:absolute;top:0;left:0;width:190px;height:40px;}
.goods h2 a{display:block;height:40px;padding-left:20px;line-height:40px;color:#fff;}
.goods h2 a:hover{text-decoration:none;}
.nav-list{height:40px;}
.nav-list li{float:left;margin-right:1px;}
.nav-list a{display:block;height:40px;float:left;padding:0 15px;text-align:center;color:#fff;font:bold 15px/40px "microsoft yahei";text-decoration:none;}
.nav-list a:hover{background:#d25400;text-decoration:none;}
.nav-list a.on{background:#d25400;}
.all-goods{position:absolute;top:40px;left:0;width:186px;height:407px;background:#FAFAFA;border:solid #ff6600;border-width:0 2px 2px;overflow:visible;}
.all-goods .item{width:186px;height:36px;border-top:1px solid #FFF;background:#f7f7f7;}
.all-goods .btnone{border-top:none;}
.all-goods .item .product{position:absolute;z-index:999;width:186px;}
.all-goods .item .product h3{width:157px;height:34px;padding-left:28px;border-width:1px 0;font-weight:normal;line-height:36px;background:url(http://gtcdn1.gaitu.com/images/www/indexSprite.png) no-repeat -12px 12px;}
.all-goods .item .product h3 a{color:#666666;font-size:14px;font-family:"宋体";}
.all-goods .item .product h3 a:hover{text-decoration:none;}
.all-goods .item .product s{display:block;position:absolute;top:13px;left:167px;width:6px;height:9px;background:url(http://gtcdn1.gaitu.com/images/www/indexSprite.png) no-repeat 0px 0px;}
.all-goods .active .product h3{line-height:32px;background-position:-12px -185px;background-color:#fff7f0;border:1px solid #ffb556;border-width:2px 0;width:160px;}
.all-goods .active .product h3 a{color:#ff6600;}
.all-goods .product-wrap{position:absolute;width:478px;z-index:99;border:2px solid #ffb556;background:#fff7f0;padding:20px;display:none;}
.all-goods .product-wrap p{color:#999999;}
.all-goods .posone{left:186px;top:0px;}
.all-goods .postwo{left:186px;top:37px;}
.all-goods .posthree{left:186px;top:74px;}
.all-goods .posfour{left:186px;top:111px;}
.all-goods .posfive{left:186px;top:148px;}
.all-goods .possix{left:186px;top:185px;}
.all-goods .posseven{left:186px;bottom:-2px;}
.all-goods .poseight{left:186px;bottom:-2px;}
.all-goods .posnine{left:186px;bottom:-2px;}
.all-goods .posten{left:186px;bottom:-2px;}
.all-goods .poseleven{left:186px;bottom:-2px;}
.all-goods .product-wrap h2{font-size:16px;color:#333;font-weight:bold;}
.all-goods .product-wrap h2 a{height:auto;line-height:16px;color:#333;padding-left:0;}
.all-goods .product-wrap ul{border-top:2px solid #c1c1c1;}
.all-goods .product-wrap ul li{float:left;display:inline;margin-right:15px;margin-top:15px;white-space:nowrap;}
.all-goods .product-wrap ul li a{padding-left:30px;background:url(http://gtcdn1.gaitu.com/images/www/indexSprite.png) no-repeat -8px -249px;color:#666666;display:inline-block;line-height:18px;text-decoration:none;font-weight:bold;}
.all-goods .product-wrap ul li a:hover{text-decoration:none;background-position:-8px -219px;color:#ff6600;}
.all-goods .product-wrap div dd,.all-goods .product-wrap div dl a{display:block;width:185px;height:120px;overflow:hidden;}
分享到QQ
分享到微博
微信扫一扫
