jQuery仿家具商城分类导航banner布局代码
导航菜单 次 2019-03-17jQuery实现家具商城分类导航，精美banner布局，代码清晰易用。动态菜单展示，提升用户体验。优化代码结构，降低维护成本，助力商城快速发展。
jQuery仿美乐乐家具商城网站左侧分类导航菜单和宽屏的图片轮播布局效果代码。这是一款红色通用的商城网站分类导航和图片banner顶部布局样式代码。
[声明] 墨鱼部落格所有资源为用户免费分享产生，若发现您的权利被侵害，请点击后方链接查看并联系我们，我们尽快处理。免责声明|侵权处理流程
使用方法：
1、head引入css文件
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
2、head引入js文件
<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> <script src="statics/js/jquery.SuperSlide.2.1.3.js" type="text/javascript" charset="utf-8"></script>
3、body引入HTML代码
<div class="header">
<div class="menu-bar">
<div class="view">
<div class="category">
<h2>商品分类</h2>
<ul class="category-option">
<li class="cat-item top-cat">
<div class="sub-cat clearfix">
<div class="sub-cat-links Left">
<ul class="sub-group clearfix">
<li class="Left sub-title">
<a href="#"><i class="i-t"></i>卧室</a>
</li>
<li class="Left sub-content">
<a href="#">床</a>
<a href="#" style="color:#e62318 !important;">美国进口床垫</a>
<a href="#" style="color:#e62318 !important;">美规床</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>
</li>
</ul>
<ul class="sub-group clearfix">
<li class="Left sub-title">
<a href="#"><i class="i-t"></i>客厅</a>
</li>
<li class="Left sub-content">
<a href="#" style="color:#e62318 !important;">沙发</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="#" style="color:#e62318 !important;">客厅套装</a>
</li>
</ul>
<ul class="sub-group clearfix">
<li class="Left sub-title">
<a href="#"><i class="i-t"></i>餐厅</a>
</li>
<li class="Left sub-content">
<a href="#">餐桌</a>
<a href="#">餐椅</a>
<a href="#" style="color:#e62318 !important;">餐厅套装</a>
<a href="#">餐边柜</a>
</li>
</ul>
<ul class="sub-group clearfix">
<li class="Left sub-title">
<a href="#"><i class="i-t"></i>书房</a>
</li>
<li class="Left sub-content">
<a href="#" style="color:#e62318 !important;">书桌/书台</a>
<a href="#">书柜/书架</a>
<a href="#">书椅/转椅</a>
<a href="#">书房套装</a>
</li>
</ul>
<ul class="sub-group clearfix">
<li class="Left sub-title">
<a href="#"><i class="i-t"></i>儿童房</a>
</li>
<li class="Left sub-content">
<a href="#">儿童床</a>
<a href="#" style="color:#e62318 !important;">儿童床垫</a>
<a href="#">儿童床头柜</a>
<a href="#">儿童衣柜</a>
<a href="#">儿童桌</a>
<a href="#">儿童椅</a>
<a href="#">儿童柜类</a>
</li>
</ul>
<ul class="sub-group clearfix">
<li class="Left sub-title">
<a href="#"><i class="i-t"></i>户外/阳台</a>
</li>
<li class="Left sub-content">
<a href="#">户外椅</a>
<a href="#" style="color:#e62318 !important;">户外套装</a>
<a href="#">吊篮/吊椅</a>
<a href="#">摇椅</a>
<a href="#">藤艺家具</a>
<a href="#">折叠床</a>
</li>
</ul>
<ul class="sub-group clearfix">
<li class="Left sub-title">
<a href="#"><i class="i-t"></i>办公家具</a>
</li>
<li class="Left sub-content last">
<a href="#" style="color:#e62318 !important;">办公沙发</a>
<a href="#">办公桌</a>
<a href="#">文件柜</a>
<a href="#">办公椅</a>
<a href="#">保险柜</a>
</li>
</ul>
</div>
<div class="sub-cat-brand Left">
<h6>推荐品牌</h6>
<div class="tag">
<a href="#" style="color:#cf000e !important">凯撒豪庭</a>
<a href="#">北欧悠歌</a>
<a href="#">白金宫殿</a>
<a href="#">法兰西玫瑰</a>
<a href="#">韩菲尔</a>
<a href="#">卡富亚</a>
<a href="#" style="color:#cf000e !important">蓝骑家居</a>
<a href="#">卡洛林</a>
<a href="#">青春城堡</a>
<a href="#" style="color:#cf000e !important">宜华</a>
<a href="#">木木原</a>
<a href="#">蒂美悦</a>
</div>
<a href="#"><img src="statics/images/1.jpg" width="190" height="260">
</a>
</div>
</div>
<i class="icon i0"></i>
<a class="txt" href="#">家具</a>
</li>
<li class="cat-item ">
<i class="icon i1"></i>
<a class="txt" href="#">卧室</a>
<a class="txt" href="#">床</a>
<a class="txt" href="#">床垫</a>
<a class="txt" href="#">衣柜</a>
</li>
<li class="cat-item ">
<i class="icon i2"></i>
<a class="txt" href="#">客厅</a>
<a class="txt" href="#">沙发</a>
<a class="txt" href="#">电视柜</a>
</li>
<li class="cat-item ">
<i class="icon i3"></i>
<a class="txt" href="#">餐厅</a>
<a class="txt" href="#">餐桌</a>
<a class="txt" href="#">餐椅</a>
</li>
<li class="cat-item ">
<i class="icon i4"></i>
<a class="txt" href="#">书房</a>
<a class="txt" href="#">书桌</a>
<a class="txt" href="#">书柜</a>
</li>
<li class="cat-item ">
<i class="icon i5"></i>
<a class="txt" href="#">儿童房</a>
<a class="txt" href="#">儿童床</a>
<a class="txt" href="#">儿童桌</a>
</li>
<li class="cat-item ">
<i class="icon i6"></i>
<a class="txt" href="#">户外/阳台</a>
<a class="txt" href="#">办公家具</a>
</li>
<li class="cat-item top-cat">
<i class="icon i7"></i>
<a class="txt" href="#">建材灯饰</a>
</li>
<li class="cat-item ">
<i class="icon i8"></i>
<a class="txt" href="#">灯饰照明</a>
<a class="txt" href="#">吊灯</a>
<a class="txt" href="#">吸顶灯</a>
</li>
<li class="cat-item ">
<i class="icon i9"></i>
<a class="txt" href="#">卫浴</a>
<a class="txt" href="#">浴室柜</a>
<a class="txt" href="#">座便器</a>
</li>
<li class="cat-item top-cat">
<i class="icon i10"></i>
<a class="txt" href="#">家居家饰</a>
</li>
<li class="cat-item ">
<i class="icon i11"></i>
<a class="txt" href="#">床上用品</a>
<a class="txt" href="#">布艺织物</a>
</li>
<li class="cat-item ">
<i class="icon i12"></i>
<a class="txt" href="#">家居饰品</a>
<a class="txt" href="#">居家日用</a>
</li>
</ul>
</div>
<ul class="navigator">
<li class="current">
<a href="#">首页</a>
</li>
<li>
<a href="#">家具城</a>
</li>
<li>
<a href="#">建材城</a>
</li>
<li>
<a href="#">家居家饰</a>
</li>
<li>
<a href="#">团购</a>
</li>
<li>
<a href="#">体验馆</a>
</li>
<li>
<a href="#">阅木</a>
</li>
<li>
<a href="#">晒家</a>
</li>
<li>
<a href="#">图览家居</a>
</li>
</ul>
</div>
</div>
</div>
<!--轮播-->
<div class="scroll-banner" style="background:#227465">
<ul class="scroll-content">
<li class="scroll-item" style="background:#227465;display: block;">
<div class="scroll-index">
<a href="#">
<img class="sc-big fadeInR" src="statics/images/banner01.jpg">
</a>
<div class="banner_r">
<a href="#">
<img src="statics/images/banner_r01.png"/>
</a>
<a href="#">
<img src="statics/images/banner_r02.png"/>
</a>
</div>
</div>
</li>
<li class="scroll-item" style="background:#eef3f5">
<div class="scroll-index">
<a href="#">
<img class="sc-big fadeInR" src="statics/images/banner02.jpg">
</a>
<div class="banner_r">
<a href="#">
<img src="statics/images/banner_r01.png"/>
</a>
<a href="#">
<img src="statics/images/banner_r02.png"/>
</a>
</div>
</div>
</li>
<li class="scroll-item" style="background:#de3435">
<div class="scroll-index">
<a href="#">
<img class="sc-big fadeInR" src="statics/images/banner03.jpg">
</a>
<div class="banner_r">
<a href="#">
<img src="statics/images/banner_r01.png"/>
</a>
<a href="#">
<img src="statics/images/banner_r02.png"/>
</a>
</div>
</div>
</li>
<li class="scroll-item" style="background:#e8eaea">
<div class="scroll-index">
<a href="#">
<img class="sc-big fadeInR" src="statics/images/banner04.jpg">
</a>
<div class="banner_r">
<a href="#">
<img src="statics/images/banner_r01.png"/>
</a>
<a href="#">
<img src="statics/images/banner_r02.png"/>
</a>
</div>
</div>
</li>
<li class="scroll-item" style="background:#4f3a29">
<div class="scroll-index">
<a href="#">
<img class="sc-big fadeInR" src="statics/images/banner05.jpg">
</a>
<div class="banner_r">
<a href="#">
<img src="statics/images/banner_r01.png"/>
</a>
<a href="#">
<img src="statics/images/banner_r02.png"/>
</a>
</div>
</div>
</li>
<li class="scroll-item" style="background:#f2efea">
<div class="scroll-index">
<a href="#">
<img class="sc-big fadeInR" src="statics/images/banner06.jpg">
</a>
<div class="banner_r">
<a href="#">
<img src="statics/images/banner_r01.png"/>
</a>
<a href="#">
<img src="statics/images/banner_r02.png"/>
</a>
</div>
</div>
</li>
<li class="scroll-item" style="background:#179bf4">
<div class="scroll-index">
<a href="#">
<img class="sc-big fadeInR" src="statics/images/banner07.jpg">
</a>
<div class="banner_r">
<a href="#">
<img src="statics/images/banner_r01.png"/>
</a>
<a href="#">
<img src="statics/images/banner_r02.png"/>
</a>
</div>
</div>
</li>
<li class="scroll-item" style="background:#ffffff">
<div class="scroll-index">
<a href="#">
<img class="sc-big fadeInR" src="statics/images/banner08.jpg">
</a>
<div class="banner_r">
<a href="#">
<img src="statics/images/banner_r01.png"/>
</a>
<a href="#">
<img src="statics/images/banner_r02.png"/>
</a>
</div>
</div>
</li>
</ul>
<div class="scroll-btn">
<span class="current"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script type="text/javascript">
//左侧分类导航
$('.category-option .cat-item').hover(function(){$(this).toggleClass('hover')})
//图片轮播
jQuery(".scroll-banner").slide({mainCell:".scroll-content",titCell:".scroll-btn span",titOnClassName:"current",effect:"fold",autoPlay:true,delayTime:1000,interTime:3500});
</script>
文件目录
本资源来自：代码 » 导航菜单 » jQuery仿家具商城分类导航banner布局代码
注：此资源非帝国CMS模板/特效/源码，需要帝国CMS整站模板源码的小伙伴，请移步 帝国CMS模板，感谢支持！
js页面滚动定位导航
« 上一篇
2019年07月10日
div css餐饮加盟分类导航菜单代码
下一篇 »
2019年03月15日
1、如非特殊说明，本站对本文提供的代码或者素材不拥有任何权利，其版权归原著者拥有。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来，仅供学习和研究使用。
3、如有侵犯你版权的，请来信（邮箱:48444431@qq.com）指出，核实后，本站将立即改正。
4、如有链接无法下载、失效或广告，请点击下面的报错或者联系墨鱼处理！
5、以上资源售价只是赞助，不代表代码或者素材本身价格。收取费用仅维持本站的服务器开销！
6、如无特殊说明，如：织梦或者帝国等开源CMS核心模板，那么默认提供的只是HTML模板！
7、所有代码素材效果均为演示打包，最终效果请参考演示效果，本站不提供任何技术支持和服务。
8、代码素材均为虚拟物品，演示和描述无错的情况下，无法进行退换服务。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来，仅供学习和研究使用。
3、如有侵犯你版权的，请来信（邮箱:48444431@qq.com）指出，核实后，本站将立即改正。
4、如有链接无法下载、失效或广告，请点击下面的报错或者联系墨鱼处理！
5、以上资源售价只是赞助，不代表代码或者素材本身价格。收取费用仅维持本站的服务器开销！
6、如无特殊说明，如：织梦或者帝国等开源CMS核心模板，那么默认提供的只是HTML模板！
7、所有代码素材效果均为演示打包，最终效果请参考演示效果，本站不提供任何技术支持和服务。
8、代码素材均为虚拟物品，演示和描述无错的情况下，无法进行退换服务。
