QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 导航菜单 > jQuery仿家具商城分类导航banner布局代码

原创商用 jQuery仿家具商城分类导航banner布局代码

jQuery仿美乐乐家具商城网站左侧分类导航菜单和宽屏的图片轮播布局效果代码。这是一款红色通用的商城网站分类导航和图片banner顶部布局样式代码。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

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>

[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
顺丰彩票 www.978399.com-蚂蚁彩票不能提现| www.484003.com-丽水疯狂的黑彩| www.505712.com-有没有职业彩票人| www.595603.com-k彩娱乐开户| www.921138.com-神彩v1-| www.mj46.com-500彩票快三网站| www.482299.com-彩票七位数开奖时间| www.56707.com-快乐彩任选三开奖| www.034123.com-中国体育彩票nba| www.540760.com-体育彩票四一八| www.637204.com-彩虹民用无人机| www.722862.com-cai3168彩票| www.32889.cc-河南彩礼最高的周口| www.535105.com-越南六位数彩票查询| www.612965.com-福彩开奖结l果| www.855833.com-七乐彩手机怎么投注| www.985887.com-福彩3口d字迷画迷| www.fm55.com-分分快三真的假的| www.9ox.com-七星彩多久开| www.0113.top-体育彩票有几种形式| www.8962.xyz-新时代彩票是真是假| www.74236.com-彩虹旗娱乐同影| www.138702.com-湖南体彩官方网站| www.256433.com-旺彩3d官方下载| www.961024.com-七乐彩计算器360| www.cp0077.com-中国彩票快三平台| www.pf90.com-福客来彩票大发快三| www.027574.com-重庆三分彩是真的吗| www.151210.com-澳客彩票缩水软件| www.225460.cc-天天中彩票正规吗| www.302062.com-特区七星彩论坛| www.371713.com-中国足彩馆踩踏免费| www.120408.com-体彩多少天兑奖| www.906205.com-有彩色激光打印机| 天天彩票www.106356.com| www.we08.com-腾讯彩票幸运大转盘| www.73uj.com-欢迎注册辉煌彩票| www.7919.biz-彩墨染卡教程| www.81084.com-网上即开型彩票骗局| www.059294.com-温州快三结果| www.268922.com-彩票争霸8苹果| www.369812.com-网冠彩3dd-| www.500999.com-几时开始有彩色相片| www.598012.com-体彩大乐透38期| www.693990.com-买体彩用什么软件| www.866678.com-昨天3d出什么彩票| www.971145.com-下载9彩app软件| www.ew86.com-一分快三计划破解| www.4gk.com-彩票买的多能优惠吗| www.92ij.com-彩票近期中奖人苏州| www.5522.net-河北省体彩中心地图| www.10le.com-四季彩注册登录| www.er99.com-三分时时彩破解软件| www.27cv.com-哈市买彩票用品| www.1323.org-网上七乐彩票下载| www.9418.wang-彩经网走势图大全搜| www.153709.com-8k彩票有多少人玩| www.974319.com-1快可提现的彩票| www.644128.com-黑彩网投-| www.813236.com-福彩3d组六多少注| www.982097.com-福彩3d解码神器| www.597569.com-彩票中奖如何纳税| www.714832.com-彩票单期人工计划| www.951270.com-九号彩票平台登录| www.gf1.com-内蒙古福彩中心官网| www.933.xyz-彩吧图第一版| www.065201.com-天下彩票开奖| www.235713.com-极速彩票-| www.358669.com-上海福利彩官方网| www.556901.com-七星彩今晚获奖码| 幸运彩票www.672366.com| www.x20.top-彩神软件合法吗| www.0674.net-彩票快彩稳定计划群| www.0856.pw-购彩平台推荐| www.749528.com-红玺国际彩票| www.10hi.com-酷彩安全吗-| www.6623.pw-068彩票-| www.v11.in-神彩通是什么意思| www.2722.cn-旺彩双色球是真的吗| 众乐彩票www.389344.com| www.296721.com-360彩票网开奖| www.78838.cc-132彩票新版下载| www.110514.com-七星彩二字现怎么打| www.369853.com-云彩店邀请码| www.553153.com-500万彩票直播| www.704228.com-彩票256官方下载| www.138678.com-时时彩计划方案| www.271182.com-8亿彩下载-| www.381487.com-彩票诈骗十万网友| www.2753.wang-快三倍数怎样赚钱| www.077795.com-即开型彩票坑人| www.78348.cc-彩票信息查询| www.5618.me-微信群跟计划买彩票| www.90827.com-全民智投足彩老版本| www.17552.cc-官方彩票平台app| www.32230.com-快三和值计算方法| www.889171.com-易彩堂原邀请码| GO彩www.gocp2.com| www.579816.com-中国体彩网址| www.kx30.com-快三辅助下载| www.0467.pw-竞彩猜比分-| www.026593.com-连中彩票app| www.217837.com-彩票端十分快三遗漏| www.438988.com-七星彩规律走势图| www.5217.xyz-派彩的正负什么意思| www.708396.com-鼎盛娱乐买彩票被骗| www.028077.com-福建福彩中心地址| www.298153.com-人人中彩票所有版本| www.nv3.com-彩票283-| www.855425.com-彩票得主死亡| www.fu69.com-迪拜28彩票骗局| www.178.name-7彩苹果版-| www.qq67.cc-体育彩票有几种| www.73182.com-好盈彩票注册| www.767252.com-三d福彩藏机诗| www.881323.com-体彩大乐透玩法胆拖| www.944736.com-彩票之家-| www.983721.com-海口七星彩彩版专区| www.cai5678.cc-老吉林快三走势图| www.la61.com-福彩通-| www.e85.org-七乐彩随机-| www.41sj.com-3d彩票开机号| www.03nc.com-彩票驿站是什么意思| www.023527.com-彩票天罡八卦图| www.41500.cc-h5彩票程序-| www.479.biz-福利彩票刮刮乐玩法| www.hg21.com-下载中彩彩票网| www.888641.com-互联网彩票2018| www.766973.com-东莞彩乐糖果| www.960096.com-彩票十大网站| www.950704.com-我要下载乐彩网| www.017141.com-网购彩票哪家靠谱| www.61zx.com-彩31不出款-| www.42mj.com-唯彩会体育下载| www.854632.com-福彩三d开门彩| www.55032.com-盈利彩票送彩金22| www.92208.com-中国福利彩票好彩2| www.561612.com-中彩票的图片| www.100071.com-大彩网走势图首页| www.566609.com-彩神通代理微信多少| www.780229.com-长沙官网快三| www.831077.com-广州彩色复印机租赁| www.01967.com-彩678官网-| www.974735.com-七星彩票论坛门| www.2137.cc-胜负彩16132| www.473883.com-快三大小预测技巧| www.869739.com-山西十分钟开彩结果| www.022541.com-吉林快三专家推荐号| www.263601.com-温州体彩-| www.048800.cc-爱彩乐正规吗| www.0028.site-8位数字的湖北彩票| www.368889.com-内蒙古彩票快3购买| www.229660.com-黑客爆中国彩票造假| www.95935.com-重庆时时彩最新消息| www.027823.com-金禾娱乐彩票官网| www.jp61.com-山东福彩下载安装| www.51699.com-福彩3d蜂巢图| www.502377.com-kk彩票平台正规吗| www.196422.com-hao123彩票网| 网易彩票www.26163f.com| www.955195.com-网络彩票时间差漏洞| www.7500.biz-如何经营彩票店| www.hu49.com-中国体育彩票有哪种| www.949892.com-8炫彩福利彩票|