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.692.in-福彩三d方法| www.1642.vip-重庆时时彩5星直选| www.66994.cc-领奖彩票app| www.51vv.com-水彩教-| www.621223.com-名彩客栈专栏| www.733880.com-俄罗斯快三查询| www.846459.com-3d福彩我要买| www.940026.com-吉林快三稳定盘| www.cai9292.com北京体彩11选5| www.477740.com-体彩排三今日藏机图| www.772935.com-时时彩k线安卓版| www.936258.com-苏州体育彩票店转让| www.br82.com-福彩3d软件-| www.g71.com-彩经网新版-| www.65cj.com-新浪分分彩开奖| www.22342.com-女方要20万彩礼| www.90193.com-下载七彩网-| www.1956.cc-福彩3d九九彩吧| www.9974.cm-搜索福利彩票| www.76385.cc-黑金博士时时彩计划| www.032751.com-乐彩合买是骗局| www.116700.com-福彩3d的玩法技巧| www.891789.com-飞扬团队金冠彩票| www.974339.com-五分快三投注站| www.fg2.cc-分分时时彩后二直选| www.tl09.com-查询体彩开奖号码| www.19gq.com-彩仙阁挂机软件教程| www.277606.com-彩客彩票破解| www.846401.com-体彩摸奖-| www.64ko.com-七星彩投注可靠网站| www.7542.xyz-怎样申请竞彩实体| www.012428.com-赢彩王收费怎么办| www.136957.com-附近哪有福利彩票店| www.255233.com-6188彩票app| www.363558.com-湖北小伙捡彩票中奖| www.559722.com-河北冀彩宝能用了吗| www.662439.com-福彩3d开门彩杀号| www.808090.com-大优彩票平台登录| www.326559.com-七星彩开奖领奖时间| www.449718.com-123高手彩票网| www.577106.com-体育彩票未来前景| www.691972.com-彩经网遗漏数据| www.807011.com-彩票纸一张多重| www.946526.com-福建官网体彩| www.cp8358.com-三不同福利彩票开奖| www.yc81.com-彩票中奖兑奖时间| www.61oj.com-35彩票全天计划| www.4289.org-246天天彩下载| www.25822.com-聚财彩票网是否可信| www.020373.com-彩店app-| www.128325.com-快三历史开奖结果| www.269821.com-彩373app-| www.386100.com-帝豪彩票负盈利| www.550483.com-博彩送白菜2018| www.654116.com-福彩双色球红球数字| www.763928.com-福彩61生肖开奖| www.914163.com-ag彩票名站-| www.pr.cc-老快三平台-| www.b00.pw-福彩开奖日是哪几天| www.51eo.com-苏州彩票作假| www.1949.cn-佛山体彩普君店| www.9014.cn-分分时时彩杀号技巧| www.61575.cc-乐优炫彩网页版| www.027985.com-鸿彩网平台怎么样| www.125028.com-福利彩票原则| www.208446.com-广西彩票-| www.300138.cc-江苏福彩快三统计图| www.380578.com-苏州竞彩快3走势图| www.506696.com-网上能买彩票| www.583264.com-138迪斯尼彩乐园| www.677033.com-爱彩配色软件| www.767291.com-山西福彩投注站| www.888967.com-彩站宝安全吗| www.985045.com-竞彩单关网易| www.co46.com-吉林快三全天计划| www.xz59.com-吉祥彩官网下载| www.22rm.com-彩票假新闻-| www.561.org-我乐时时彩计划下载| www.7784.cn-七彩繁殖怎么调水| www.29294.cc-彩虹频道app下载| www.76639.cc-开户送彩金棋牌娱乐| www.027657.com-爱彩网-| www.095038.com-西赵口彩吧-| www.152970.com-肥强竞彩12课堂| www.230543.com-彩虹8平台骗局| www.303307.com-七彩云集团有限公司| www.366625.com-彩铅色彩搭配口诀表| www.448997.com-福彩主任视频| www.539490.com-彩票机过户-| www.611525.com-彩虹六号围攻价格| www.675202.com-2019年竞彩新规| www.740668.com-3分28是什么彩票| www.804856.com-百度七乐彩开奖结果| www.878716.com-福彩3d百度乐彩网| www.943639.com-重庆时时彩开奖生肖| www.987444.com-黑龙江福彩p62| www.tb.cc-快三开奖结果宁夏| www.lk95.com-亚洲彩票第一平台| www.h07.top-排三列走势图彩宝网| www.35yo.com-体彩顶呱刮7票| www.214.top-真三毛彩吧-| www.3709.vip-福彩三d综合图| www.8998.site-体彩网唯一官网| www.48582.com-彩票批发多少钱一张| www.87118.com-933彩票cc-| www.351006.com-彩票官网9wcc| www.455684.com-澳客网怎么买彩票| www.620369.com-彩色水磨石施工方案| www.793601.com-公务员中彩票违规吗| www.970903.com-迷彩图-| www.295.space-福彩双色球模拟选号| www.8855.vip-得彩群的骗术| www.59998.cc-卓易彩票电脑版| www.094009.com-今曰福彩快乐十分| www.236108.com-什么彩票中500万| www.365919.com-体彩排列三两码遗漏| www.586329.com-4个grand彩金| www.730784.com-彩票返点7怎么算| www.919205.com-最正规的正规时时彩| www.ak76.com-河北快三每天期数| www.sh87.cc-5分时时彩是哪里的| www.81pr.com-萍乡福彩示范店| www.5628.xyz-彩虹六号国服要钱吗| www.30578.com-达人彩票群-| www.026041.com-淘宝买彩票在哪里| www.129130.com-腾龙彩票-| www.212927.com-私彩官方如何作弊| www.331135.com-网上彩-| www.533423.com-彩票打法-| www.670532.com-彩宝宝高手免费资料| www.751745.com-苹果中彩下载| www.am02.cc-下载河北福彩快三| www.pk48.com-买了彩票不敢看| www.r20.biz-黑彩平台境外服务器| www.60kp.com-福彩家彩网专家胆码| www.0709.org-广州福彩申请条件| www.39922.com-彩票聋哑人多少钱| www.591250.com-88彩票客户端| www.681079.com-彩经彩票软件| www.778995.com-好彩票app官网| www.856701.com-逍遥彩票软件破解版| www.913676.com-快三提现会延迟吗| www.962465.com-福彩主任怎么贪的钱| www.999921.cc-易彩娱乐下载| www.am42.cc-福彩3d2000-| www.nv80.com-买彩票算赌吗| www.222601.com-一分快三网页计划| www.274668.com-时时彩游戏规则图| www.045587.com-彩票代理按天反佣金| www.192475.com-江苏省快三走势图| www.85557.com-牛彩网开机号试机号| www.105118.com-一定牛彩票客户端| www.221622.com-app瑞彩祥云| www.378955.com-好彩网app网赚| www.521760.com-时时彩大小最多连出| www.96234.com-南阳市的彩礼是多少| www.hq64.cc-3d彩票技巧-| www.50264.com-wcp玩彩票-| www.275958.com-快三作作弊器| www.673133.com-怎么找附近的彩票站| 500彩票www.585808.com| www.47au.com-竞彩代理-| www.20ht.com-最正规彩票在哪买| www.277036.com-彩票二十分钟一期|