弹出二级导航jQuery 仅做记录"/>
左侧弹出二级导航jQuery 仅做记录
左侧二级菜单手风琴效果
转自 jq22
可直接去下载
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"".dtd">
<html xmlns="">
<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=".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="/">LOGO</a></h3><s></s></div><div class="product-wrap pos01"><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><a href="/" target="_blank" title="logo"><imgsrc="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 pos02"><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><a href="/" target="_blank" title="logo"><imgsrc="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 pos03"><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><a href="/" target="_blank" title="宣传单"><imgsrc="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 pos04"><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><a href="/" target="_blank" title="画册"><imgsrc="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 pos05"><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><a href="/" target="_blank" title="优惠券"><imgsrc="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 pos06"><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><a href="/" target="_blank" title="会员卡"><imgsrc="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 pos07"><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><a href="/" target="_blank" title="不干胶贴"><imgsrc="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 pos08"><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><a href="/" target="_blank" title="手提袋"><imgsrc="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 pos09"><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><a href="/" target="_blank" title="封套"><imgsrc="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 pos10"><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><a href="/" target="_blank" title="喜帖"><imgsrc="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;
}
更多推荐
左侧弹出二级导航jQuery 仅做记录
发布评论