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天

知道了
亚洲28 www.7978.wang-做博彩代理犯法吗| www.019545.com-安顺市彩票管理中心| www.697453.com-购彩网一分快三| www.793837.com-博彩婚恋骗局| www.021374.com-怎么加盟彩票店| www.149480.com-掌上中彩可靠吗| www.511274.com-彩票余数技巧| www.625191.com-快乐彩手机版| www.602412.com-体彩彩票是真的么| www.722812.com-快三高手心得体会| www.806777.com-体彩彩票大乐透中奖| www.886877.com-福彩3d家彩网预测| www.962383.com-天天彩-| 鑫彩网www.xcw866.com| 幸运彩票网www.33598c.com| www.747100.com-彩票505-| www.902308.com-开黑彩判刑多久| www.651036.com-水彩入门教程视频| www.885265.com-七星彩中4个号有奖| www.cp548.com-哪些私彩平台靠谱| www.268588.com-网赌快三如何回本| www.458353.com-梦见买彩票差点中奖| www.090524.com-福彩双色球走势图2| www.202199.com-开奖大全彩票之家| www.523735.com-时时彩在哪里下载| www.28175.com-dc东彩娱乐-| www.612866.com-彩牛美缝剂的价格| www.499406.com-鼎锋彩票-| www.635716.com-网时时彩投注平台| www.975530.com-赣县彩礼一般多少| www.dy59.com-360彩票网-| www.f51.club-球彩台节目表| www.41qq.com-今天彩票结果是多少| www.987810.com-乐米彩票官方下载| www.ql92.com-立彩助手官方网站| www.59qx.com-专业玩彩3d分析| www.170234.cc-福彩快三彩票下载| www.939.cm-星彩叫夏侯姬妈| www.cp7358.com-北京快三技巧| 500彩票www.911790.com| www.412178.com-福彩开奖日-| www.669447.com-体彩胆是什么意思| www.31841.com-如何在彩票店买彩票| www.gs50.com-三分快三计划平台| www.ha10.com-9彩票-| www.s56.cn-发发彩票-| www.86gg.com-彩c81彩票-| www.3519.win-同城时彩官网| www.9982.top-彩票万能开挂器| www.57225.cc-彩宝宝app官网| www.984574.com-易彩网时时彩平台| www.68135.cc-网上买彩票是赌博吗| www.488190.com-快乐e彩-| www.597133.com-吉林快三派彩| www.670625.com-彩色耳环-| www.737071.com-众彩网首页3d| www.801213.com-旺旺彩票菲律宾注册| www.870339.com-分分钟开奖彩票| www.928760.com-彩票77软件疼牛| www.978367.com-天天众彩官网| www.cai7577.com快三开奖结果助手| www.723277.com-东彩娱乐贴吧| www.811585.com-美国28彩票走势| www.885628.com-鑫鑫彩票网-| 9亿彩票www.857t.com| www.036926.com-竞彩足球全包稳赚| www.085702.com-博彩漏洞套利违法吗| www.200802.com-查一下福利彩票开奖| www.24244.cc-江苏福利彩快3| www.774495.com-福彩3d赌博-| www.900253.com-福彩中奖助手下载| www.963914.com-彩票投注网大全| 吉利彩票www.80065d.com| 大赢家彩票www.576411.com| www.ou24.com-甘肃快3彩票| www.66vo.com-天地彩官网-| www.0807.vip-腾讯分分彩怎么刷量| www.036449.com-106在线彩票登录| www.300049.com-66好彩-| www.00gh.cc-形容彩虹的词语| www.96rh.com-时时彩铜雀台平台| www.678873.com-申请重庆时时彩代理| www.762632.com-i8cp彩票-| www.993010.com-彩票下载下-| www.cz46.com-数学破解彩票有规律| www.96757.cc-唯彩彩票投注技巧| www.081856.com-彩票计划导师| www.s44.cc-新用户可以领取彩金| www.4489.vip-附近的体彩投注站| www.02019.com-新版彩神v8-| www.1559.win-喜彩15886注册| www.101540.com-信誉大的彩票平台| www.396965.com-快三下局蓷选| www.505598.com-自己玩黑彩犯法吗| www.573585.com-彩胜团队微信号| www.305957.com-网上买彩票对实体店| www.490710.com-淘宝在哪里买彩票| www.579969.com-七星彩小说类似| www.713616.com-福彩彩票app下载| www.974272.com-一分钟开奖彩票网址| www.50810.com-888彩票123-| www.86457.com-彩票大神吧-| www.060635.com-新彩计划软件| www.3618.cc-中国体彩网快三| www.8357.xyz-重庆时时彩网投博金| www.480031.com-彩吧论坛一句定三码| www.561781.com-鸿彩网彩票-| www.816826.com-易众彩店-| www.885917.com-内蒙福利彩票站利润| www.947582.com-足彩微信公众号排名| www.985354.com-时时彩人工计划| www.gt9.cc-北京快三怎么赚钱| www.356166.com-盛大彩票可靠吗| www.960240.com-淘彩可以玩吗| 亚洲www.657269.com| www.561748.com-博彩娱乐送彩金大全| www.666115.com-盈利彩是正规网吗| www.733915.com-中奖规则体彩大乐透| www.800150.com-中国体彩怎么玩法| www.871410.com-江苏快三买彩票软件| www.977835.com-财富彩票平台| www.uu4.com-彩票聪明组合公式| www.vx70.com-贵州省福彩中地址| www.797699.com-不带面具领彩票| www.880954.com-彩票开奖时间双色球| www.962535.com-六开彩开奖结果走| 凤凰彩票www.88266s.com| www.fn80.com-大发快3彩票平台| www.k74.net-500彩票解码器| www.67pb.com-七星彩华南地区论坛| www.0981.org-91彩神骗局-| www.011554.com-星期五那些彩票开奖| www.127201.com-132彩票官网| www.189867.com-江苏快三号码遗漏| www.248600.com-中国体育彩排列三| www.305738.com-酷彩吧靠谱吗| www.9959.cm-青海省彩礼排名| www.58923.cc-彩迷是什么意思| www.036255.com-快三算法大小单双句| www.cp5738.com-安徽省福彩中心| www.889178.com-易彩网怎么注册| www.971874.com-彩22靠谱吗-| www.de27.com-易彩用户登录| www.i12.club-彩票图纸-| www.879396.com-彩富网手机版| www.544100.com-缺一门彩票-| www.024930.com-澳门新莆京分分彩| www.82129.com-玛雅吧玩彩票输死了| www.283728.com-福彩开奖直播频道| www.12sl.com-篮球外围彩票网站| www.398.hk-惠民彩票安全吗| www.331686.com-彩票表格制作教程| www.35132.com-数字型彩票追踪大小| www.555361.com-华彩控股股价| www.612189.com-时时彩票吧-| www.668578.com-远途国际彩票是什么| www.720280.com-七乐彩胆拖玩法| www.787523.com-江苏快三怎么买大小| www.848580.com-幸运时时彩60秒| www.893361.com-快开彩官网-| www.949877.com-相信彩票下载| www.984427.com-外国彩票软件下载| www.cp6833.com-安徽快三投注技巧| www.68139.cc-足彩是赌博吗|