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天

知道了
1分快三 www.110067.com-七星彩谁预测的最准| www.230592.cc-彩八彩票骗了十万| www.94nh.com-体育彩票流程| www.392067.com-我要找个彩票在哪里| www.39014.com-体彩浙江-| www.075916.com-达人彩票登录| www.158903.com-福利彩票字谜画谜| www.839983.com-北京pc是什么彩票| www.935286.com-好彩票苹果版下载| www.994503.com-重庆赛车彩票技巧| www.bw80.com-甘肃快三讨论群| www.932036.com-七星彩最少一等奖| www.18vr.com-星期五出什么彩票| www.361956.com-彩吧论坛官方下载| www.050045.com-网络黑彩平台| www.137022.com-金彩网马会中特彩票| www.549527.com-网易彩票旧版首页| www.638165.com-色彩构成九宫格| www.774772.com-黄金8彩票网app| www.862829.com-泰安体彩中心| www.939918.com-彩神争霸大发快3| www.990540.com-中华彩票-| www.yk7.cc-福彩有10选5吗| www.st63.com-时时彩高手十年技巧| www.07pr.com-上期福彩号码多少| www.399831.com-海南七彩老鼠精板| www.517209.com-4146牛彩-| www.591018.com-彩票店中大奖| www.893025.com-大师彩票-| www.968637.com-乐彩vip合法吗| www.cp5285.com-爱彩乐彩票-| www.801722.com-广西福彩中心电话| www.903830.com-988彩票安卓版| www.981486.com-中国足彩在线| www.dh0.com-玩快三-| www.sq.cc-河南福利彩票快3| www.qh62.com-快三下期怎么推算| www.19we.com-体育彩票活动内容| www.94bm.com-购彩计划网址| www.2746.xyz-快三5倍能中多少钱| www.8324.loan-福利彩票代销到期后| www.38122.cc-红彩会手机登录| www.33735.com-福利彩票新手入门| www.022459.com-重庆时彩小窍门| www.365390.cc-福彩精英免费预测| www.0441.xyz-彩贝壳-| www.20622.com-588彩票网-| www.76399.com-新浪彩2博客| www.31881.com-开个彩票店要会什么| www.81pr.com-萍乡福彩示范店| www.8219.cn-01彩票助手-| www.63825.com-广西快三是官方开奖| www.3546.vip-一分时时彩破解版| www.17zv.com-什么的彩虹桥| www.de33.com-appcp快三-| www.250521.com-全中彩票官网下载| www.348106.com-彩票七乐彩下载| www.475446.com-中彩票怎么交税| www.056968.com-七星彩奖金怎么算的| www.196981.com-彩票计划网站| www.275132.com-快三四码复式| www.34892.com-福彩3d井奖结果| www.bb27.com-江西快三投注平台| www.14se.com-铜陵体彩兑奖中心| www.3ff.cc-彩票奖金多久到账| 福彩www.86267p.com| www.oj11.com-福利彩票38期| www.557638.com-七星彩开奖规律图| www.817860.com-彩票专业走势| www.cp688.cc-新快三怎么玩| www.19ty.com-最新微信彩票群号| www.071.date-体彩七星彩中奖故事| www.547830.com-万彩激活码-| www.650332.com-nba篮球博彩| www.730936.com-临渭区福彩店转让| www.800690.com-福利彩票有快三吗| www.867955.com-上海快三号码预测| www.933281.com-省份快三官网| www.980199.cc-竞彩胜负平玩法| www.cai5766.com吉林快三跨度走势图| www.799767.com-赠送彩金-| www.895368.com-大中华彩票客服| www.965009.com-境外彩票网站制作| PK彩票www.907118.com| www.739611.com-彩九.com下载| www.841763.com-福彩3d姜太公字谜| www.963126.com-彩钢瓦房顶效果图| 彩多多www.78949k.com| www.ex01.com-犀牛彩票-| www.525584.com-极速75时时彩| www.365781.com-体彩p3王滨字谜| www.363881.com-沈河区福利彩票| www.473119.com-分分彩平刷挂机方案| www.155382.com-最赚钱的彩票| www.64200.com-新浪足球竞彩曲昌春| www.fd80.com-红牛彩票有赚的吗| www.709608.com-彩票网站打不开咋办| www.111319.cc-易彩快三攻略| www.26yh.com-彩票第19030期| www.280630.com-在线模拟彩票投注| www.756696.com-全民彩票注册网站| www.916375.com-足彩单场奖金计算| www.fx16.com-彩788-| www.502010.com-大佬彩票正规吗| www.693702.com-105彩票码下载| www.826598.com-马云写的彩票号码| www.957863.com-七星彩包码-| www.cai7199.com彩票官方计划app| www.u94.com-足彩分析新浪| www.788953.com-古建彩绘教程视频| www.411039.com-七彩云南歌词作者| www.yl06.com-马来三分彩-| www.l52.cn-中彩股份内蒙古快3| www.cai81.cc-快三过五什么意思| www.32555.cc-彩礼不超过八万| www.028708.com-安徽快三2期计划| www.600.tv-福彩网免费资料大全| www.093299.com-全部彩种5分快3| www.77629.cc-彩16是官方的吗| www.gh6.cc-福利彩票彩种介绍| www.240550.com-快三如何跳-| www.vi60.com-快三精准计划app| www.te26.com-大发快三规律视频| www.701896.com-六喝彩开奖结果查珣| www.795726.com-天天彩票的网站| www.862799.com-彩票开奖今天晚上| www.911237.com-线路测试k彩| www.961662.com-王者彩票是骗局吗| 福运www.fyyy2.com| www.rl67.com-请放湖北快三牛| www.654719.com-七星彩心灵码仙今天| www.103072.com-两分彩-| 500万彩票www.39500k.com| www.nb7.com-有没有一分快三平台| www.715261.com-彩票达人双色球| www.579643.com-统一彩票下载| www.74se.cc-甘肃快三是24小时| 亿万彩票www.994696.com| www.918189.com-一分快三是不是私彩| www.988029.com-彩票倍投计算网页| www.fg47.com-彩票平台赚返点| www.092699.com-商丘彩礼-| www.466440.com-美国45秒彩平台| www.590616.com-河北彩礼地图| www.657502.com-今晚体彩开奖| www.821582.com-福彩3d太湖玄机图| www.882404.com-166彩票网登录| www.954098.com-黑龙江体彩网中心| www.995601.com-8k彩票易彩快3| www.ek30.com-福彩3d红五星图库| www.220911.com-时时彩助手软件下载| www.96474.com-彩票分为几类| www.945206.com-买彩票有年龄限制吗| www.54319.cc-婚恋时时彩诈骗| www.9ay.cc-体彩6十1中奖概率| www.672096.com-彩宝时时彩-| www.738552.com-福彩中奖多少钱一注| www.ej60.com-体彩19025-| www.56680.com-时时彩前三一码规则| www.254654.com-好彩快三骗局| www.13453.com-足彩竞彩海外推| www.q98.cc-新手玩哪个彩票好中| www.315334.com-彩虹七号-| www.365969.com-海底世界彩铅画图片|