左侧二级菜单手风琴效果 http://www.jq22.com/jquery-info16488
转自 jq22.com http://www.jq22.com/jquery-info306
可直接去下载
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 src="https://cdn.bootcss.com/jquery/3.4.1/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="http://www.jq22.com/">LOGO</a></h3>
<s></s>
</div>
<div class="product-wrap pos01">
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="http://www.jq22.com/">LOGO</a></h2>
<p class="lh30">两大超值套餐任选,最低只需588元。</p>
<ul class="cf">
<li><a href="http://www.jq22.com/" target="_blank">LOGO设计</a></li>
<li><a href="http://www.jq22.com/" target="_blank">LOGO案例</a></li>
<li><a href="http://www.jq22.com/" target="_blank">LOGO常识</a></li>
<li><a href="http://www.jq22.com/" target="_blank">VI常识</a></li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd><a href="http://www.jq22.com/" target="_blank" title="logo"><img
src="images/0931524708.jpg"></a></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<div class="product">
<h3><a href="http://www.jq22.com/">名片</a></h3>
<s></s>
</div>
<div class="product-wrap pos02">
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="http://www.jq22.com/">名片</a></h2>
<p class="lh30">免费在线设计,印刷低至3.8元/盒,全国包邮。</p>
<ul class="cf">
<li><a href="http://www.jq22.com/" target="_blank">名片设计</a></li>
<li><a href="http://www.jq22.com/" target="_blank">名片印刷</a></li>
<li><a href="http://www.jq22.com/" target="_blank">名片模板</a></li>
<li><a href="http://www.jq22.com/" target="_blank">名片欣赏</a></li>
<li><a href="http://www.jq22.com/" target="_blank">名片常识</a></li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd><a href="http://www.jq22.com/" target="_blank" title="logo"><img
src="images/0931224551.jpg"></a></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<div class="product">
<h3><a href="http://www.jq22.com/">宣传单</a></h3>
<s></s>
</div>
<div class="product-wrap pos03">
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="http://www.jq22.com/">宣传单</a></h2>
<p class="lh30">快速设计,高效印刷,省心更放心。</p>
<ul class="cf">
<li><a href="http://www.jq22.com/" target="_blank">宣传单设计</a></li>
<li><a href="http://www.jq22.com/" target="_blank">宣传单印刷</a></li>
<li><a href="http://www.jq22.com/" target="_blank">宣传单模板</a></li>
<li><a href="http://www.jq22.com/" target="_blank">宣传单常识</a></li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd><a href="http://www.jq22.com/" target="_blank" title="宣传单"><img
src="images/0935017257.jpg"></a></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<div class="product">
<h3><a href="http://www.jq22.com/">画册</a></h3>
<s></s>
</div>
<div class="product-wrap pos04">
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="http://www.jq22.com/">画册</a></h2>
<p class="lh30">专业设计师提供多种设计方案,设计印刷一站式。</p>
<ul class="cf">
<li><a href="http://www.jq22.com/" target="_blank">画册设计</a></li>
<li><a href="http://www.jq22.com/" target="_blank">画册印刷</a></li>
<li><a href="http://www.jq22.com/" target="_blank">画册欣赏</a></li>
<li><a href="http://www.jq22.com/" target="_blank">画册常识</a></li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd><a href="http://www.jq22.com/" target="_blank" title="画册"><img
src="images/0933307415.jpg"></a></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<div class="product">
<h3><a href="http://www.jq22.com/">优惠券</a></h3>
<s></s>
</div>
<div class="product-wrap pos05">
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="http://www.jq22.com/">优惠券</a></h2>
<p class="lh30">设计18元起,印刷低至0.1元/张,全国包邮。</p>
<ul class="cf">
<li><a href="http://www.jq22.com/" target="_blank">优惠券设计</a></li>
<li><a href="http://www.jq22.com/" target="_blank">优惠券印刷</a></li>
<li><a href="http://www.jq22.com/" target="_blank">优惠券模板</a></li>
<li><a href="http://www.jq22.com/" target="_blank">优惠券常识</a></li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd><a href="http://www.jq22.com/" target="_blank" title="优惠券"><img
src="images/0937077379.jpg"></a></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<div class="product">
<h3><a href="http://www.jq22.com/">会员卡</a></h3>
<s></s>
</div>
<div class="product-wrap pos06">
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="http://www.jq22.com/">会员卡</a></h2>
<p class="lh30">PVC卡/贵宾卡/购物卡/礼品卡定制,快速设计18元起。</p>
<ul class="cf">
<li><a href="http://www.jq22.com/" target="_blank">会员卡设计</a></li>
<li><a href="http://www.jq22.com/" target="_blank">会员卡定制</a></li>
<li><a href="http://www.jq22.com/" target="_blank">会员卡模板</a></li>
<li><a href="http://www.jq22.com/" target="_blank">会员卡常识</a></li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd><a href="http://www.jq22.com/" target="_blank" title="会员卡"><img
src="images/0933565639.jpg"></a></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<div class="product">
<h3><a href="http://www.jq22.com/">不干胶贴</a></h3>
<s></s>
</div>
<div class="product-wrap pos07">
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="http://www.jq22.com/">不干胶贴</a></h2>
<p class="lh30">铜版纸不干胶贴,快速设计印刷。</p>
<ul class="cf">
<li><a href="http://www.jq22.com/" target="_blank">不干胶贴设计</a></li>
<li><a href="http://www.jq22.com/" target="_blank">不干胶贴印刷</a></li>
<li><a href="http://www.jq22.com/" target="_blank">不干胶贴模板</a></li>
<li><a href="http://www.jq22.com/" target="_blank">不干胶贴常识</a></li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd><a href="http://www.jq22.com/" target="_blank" title="不干胶贴"><img
src="images/0932237986.jpg"></a></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<div class="product">
<h3><a href="http://www.jq22.com/">手提袋</a></h3>
<s></s>
</div>
<div class="product-wrap pos08">
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="http://www.jq22.com/">手提袋</a></h2>
<p class="lh30">纸质手提袋定制,设计印刷全部搞定。</p>
<ul class="cf">
<li><a href="http://www.jq22.com/" target="_blank">手提袋设计</a></li>
<li><a href="http://www.jq22.com/" target="_blank">手提袋印刷</a></li>
<li><a href="http://www.jq22.com/" target="_blank">手提袋模板</a></li>
<li><a href="http://www.jq22.com/" target="_blank">手提袋常识</a></li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd><a href="http://www.jq22.com/" target="_blank" title="手提袋"><img
src="images/0934218124.jpg"></a></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<div class="product">
<h3><a href="http://www.jq22.com/">封套</a></h3>
<s></s>
</div>
<div class="product-wrap pos09">
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="http://www.jq22.com/">封套</a></h2>
<p class="lh30">提供大量设计模板,设计印刷一站式解决。</p>
<ul class="cf">
<li><a href="http://www.jq22.com/" target="_blank">封套设计</a></li>
<li><a href="http://www.jq22.com/" target="_blank">封套印刷</a></li>
<li><a href="http://www.jq22.com/" target="_blank">封套模板</a></li>
<li><a href="http://www.jq22.com/" target="_blank">封套常识</a></li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd><a href="http://www.jq22.com/" target="_blank" title="封套"><img
src="images/0932539383.jpg"></a></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<div class="product">
<h3><a href="http://www.jq22.com/">喜帖</a></h3>
<s></s>
</div>
<div class="product-wrap pos10">
<div class="cf">
<div class="fl wd252 pr20">
<h2><a href="http://www.jq22.com/">喜帖</a></h2>
<p class="lh30">时尚照片喜帖,上传照片自主DIY。</p>
<ul class="cf">
<li><a href="http://www.jq22.com/" target="_blank">喜帖设计</a></li>
<li><a href="http://www.jq22.com/" target="_blank">喜帖模板</a></li>
<li><a href="http://www.jq22.com/" target="_blank">喜帖常识</a></li>
<li><a href="http://www.jq22.com/" target="_blank">喜帖常见问题</a></li>
</ul>
</div>
<dl class="fl wd185 pl20 blee">
<dt class="lh36">促销活动</dt>
<dd><a href="http://www.jq22.com/" target="_blank" title="喜帖"><img
src="images/0934415585.jpg"></a></dd>
</dl>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
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 */
.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 .title {
background: #D25400;
}
.goods h2 a, .goods .title {
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;
}
.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;
}
.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 .pos01 {
left: 186px;
top: 0px;
}
.all-goods .pos02 {
left: 186px;
top: 37px;
}
.all-goods .pos03 {
left: 186px;
top: 74px;
}
.all-goods .pos04 {
left: 186px;
top: 111px;
}
.all-goods .pos05 {
left: 186px;
top: 148px;
}
.all-goods .pos06 {
left: 186px;
top: 185px;
}
.all-goods .pos07 {
left: 186px;
bottom: -2px;
}
.all-goods .pos08 {
left: 186px;
bottom: -2px;
}
.all-goods .pos09 {
left: 186px;
bottom: -2px;
}
.all-goods .pos10 {
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;
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;
}