演示网站 jQuery左侧弹出二级导航
编写代码
<!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">
$(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();
});
});
</script>
</head>
<body>
<div class="nav-wrap">
<div class="nav">
<div class="goods">
<h2 class="title">商品分类</h2>
<div class="all-goods">
<div class="item btnone">
<div class="product">
<h3><a href="https://www.smareoweoum.cn/">LOGO</a></h3>
<s></s>
</div>
<div class="product-wrap pos01">
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="https://www.smareoweoum.cn/">LOGO</a></h2>
<p class="lh30">两大超值套餐任选，最低只需588元。</p>
<ul class="cf">
<li><a href="https://www.smareoweoum.cn/" target="_blank">LOGO设计</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">LOGO案例</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">LOGO常识</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">VI常识</a></li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd><a href="https://www.smareoweoum.cn/" target="_blank" title="logo"><img src="images/0931524708.jpg"></a></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<div class="product">
<h3><a href="https://www.smareoweoum.cn/">名片</a></h3>
<s></s>
</div>
<div class="product-wrap pos02">
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="https://www.smareoweoum.cn/">名片</a></h2>
<p class="lh30">免费在线设计，印刷低至3.8元/盒，全国包邮。</p>
<ul class="cf">
<li><a href="https://www.smareoweoum.cn/" target="_blank">名片设计</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">名片印刷</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">名片模板</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">名片欣赏</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">名片常识</a></li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd><a href="https://www.smareoweoum.cn/" target="_blank" title="logo"><img src="images/0931224551.jpg"></a></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<div class="product">
<h3><a href="https://www.smareoweoum.cn/">宣传单</a></h3>
<s></s>
</div>
<div class="product-wrap pos03">
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="https://www.smareoweoum.cn/">宣传单</a></h2>
<p class="lh30">快速设计，高效印刷，省心更放心。</p>
<ul class="cf">
<li><a href="https://www.smareoweoum.cn/" target="_blank">宣传单设计</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">宣传单印刷</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">宣传单模板</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">宣传单常识</a></li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd><a href="https://www.smareoweoum.cn/" target="_blank" title="宣传单"><img src="images/0935017257.jpg"></a></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<div class="product">
<h3><a href="https://www.smareoweoum.cn/">画册</a></h3>
<s></s>
</div>
<div class="product-wrap pos04">
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="https://www.smareoweoum.cn/">画册</a></h2>
<p class="lh30">专业设计师提供多种设计方案，设计印刷一站式。</p>
<ul class="cf">
<li><a href="https://www.smareoweoum.cn/" target="_blank">画册设计</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">画册印刷</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">画册欣赏</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">画册常识</a></li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd><a href="https://www.smareoweoum.cn/" target="_blank" title="画册"><img src="images/0933307415.jpg"></a></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<div class="product">
<h3><a href="https://www.smareoweoum.cn/">优惠券</a></h3>
<s></s>
</div>
<div class="product-wrap pos05">
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="https://www.smareoweoum.cn/">优惠券</a></h2>
<p class="lh30">设计18元起，印刷低至0.1元/张，全国包邮。</p>
<ul class="cf">
<li><a href="https://www.smareoweoum.cn/" target="_blank">优惠券设计</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">优惠券印刷</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">优惠券模板</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">优惠券常识</a></li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd><a href="https://www.smareoweoum.cn/" target="_blank" title="优惠券"><img src="images/0937077379.jpg"></a></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<div class="product">
<h3><a href="https://www.smareoweoum.cn/">会员卡</a></h3>
<s></s>
</div>
<div class="product-wrap pos06">
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="https://www.smareoweoum.cn/">会员卡</a></h2>
<p class="lh30">PVC卡/贵宾卡/购物卡/礼品卡定制，快速设计18元起。</p>
<ul class="cf">
<li><a href="https://www.smareoweoum.cn/" target="_blank">会员卡设计</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">会员卡定制</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">会员卡模板</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">会员卡常识</a></li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd><a href="https://www.smareoweoum.cn/" target="_blank" title="会员卡"><img src="images/0933565639.jpg"></a></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<div class="product">
<h3><a href="https://www.smareoweoum.cn/">不干胶贴</a></h3>
<s></s>
</div>
<div class="product-wrap pos07">
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="https://www.smareoweoum.cn/">不干胶贴</a></h2>
<p class="lh30">铜版纸不干胶贴，快速设计印刷。</p>
<ul class="cf">
<li><a href="https://www.smareoweoum.cn/" target="_blank">不干胶贴设计</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">不干胶贴印刷</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">不干胶贴模板</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">不干胶贴常识</a></li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd><a href="https://www.smareoweoum.cn/" target="_blank" title="不干胶贴"><img src="images/0932237986.jpg"></a></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<div class="product">
<h3><a href="https://www.smareoweoum.cn/">手提袋</a></h3>
<s></s>
</div>
<div class="product-wrap pos08">
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="https://www.smareoweoum.cn/">手提袋</a></h2>
<p class="lh30">纸质手提袋定制，设计印刷全部搞定。</p>
<ul class="cf">
<li><a href="https://www.smareoweoum.cn/" target="_blank">手提袋设计</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">手提袋印刷</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">手提袋模板</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">手提袋常识</a></li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd><a href="https://www.smareoweoum.cn/" target="_blank" title="手提袋"><img src="images/0934218124.jpg"></a></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<div class="product">
<h3><a href="https://www.smareoweoum.cn/">封套</a></h3>
<s></s>
</div>
<div class="product-wrap pos09">
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="https://www.smareoweoum.cn/">封套</a></h2>
<p class="lh30">提供大量设计模板，设计印刷一站式解决。</p>
<ul class="cf">
<li><a href="https://www.smareoweoum.cn/" target="_blank">封套设计</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">封套印刷</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">封套模板</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">封套常识</a></li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd><a href="https://www.smareoweoum.cn/" target="_blank" title="封套"><img src="images/0932539383.jpg"></a></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<div class="product">
<h3><a href="https://www.smareoweoum.cn/">喜帖</a></h3>
<s></s>
</div>
<div class="product-wrap pos10">
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="https://www.smareoweoum.cn/">喜帖</a></h2>
<p class="lh30">时尚照片喜帖，上传照片自主DIY。</p>
<ul class="cf">
<li><a href="https://www.smareoweoum.cn/" target="_blank">喜帖设计</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">喜帖模板</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">喜帖常识</a></li>
<li><a href="https://www.smareoweoum.cn/" target="_blank">喜帖常见问题</a></li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd><a href="https://www.smareoweoum.cn/" target="_blank" title="喜帖"><img src="images/0934415585.jpg"></a></dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<ul class="nav-list cf">
<li><a href="https://www.smareoweoum.cn/">首页</a></li>
<li><a href="https://www.smareoweoum.cn/">优惠活动</a></li>
<li><a class="on" href="https://www.smareoweoum.cn/">图片素材</a></li>
<li><a href="https://www.smareoweoum.cn/">JS代码</a></li>
<li><a href="https://www.smareoweoum.cn/">关于我们</a></li>
<li><a href="https://www.smareoweoum.cn/">联系我们</a></li>
<li><a href="https://www.smareoweoum.cn/">在线留言</a></li>
</ul>
</div>
</div>
<script src="https://www.smareoweoum.cn/js/jq.js"></script>
</body>
</html>
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
