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.196811.cc-手机彩票123下载| www.7826.loan-竞彩对比-| www.56028.com-彩票是几个数| www.964896.com-体育彩票官网唯一| www.ve.cc-快三线上投注平台| www.qa85.com-彩票注册送28金| www.yl76.com-彩计划高手福彩| www.98kw.com-黑彩返点-| www.085270.com-彩8彩票靠谱吗| www.166069.com-福彩3b走试图| www.319691.com-多赢彩票官方网站| www.185932.com-一分时时彩计算公式| www.8659.top-人民网拟自营彩票| www.hp48.com-足球彩票比分值| www.78603.com-福彩3d绝密资料| www.870388.com-重庆时时彩官方| www.jw2.cc-河南福彩网官网| www.1717.cc-世界杯在那里面彩票| www.191612.com-我要搜索彩票走势图| www.3fx.com-京彩挂机群-| www.e14.net-博彩app哪个正规| www.81yc.com-大中华彩票首页| www.55036.com-台湾时时彩官方| www.028812.com-快三pk10计划| www.537908.com-家彩字谜区-| www.70066.cc-时时彩后二最新公式| www.tm93.com-3d水果彩吧-| www.466658.com-洛杉矶国际快三网址| www.358973.com-体彩一组是几位数| www.507072.com-亿彩国际-| www.595920.com-博鑫网彩-| www.671032.com-彩种大厅百乐宝下载| www.785013.com-乐优彩票ios| www.866167.com-3d彩网-| www.968543.com-瑞彩网论坛-| www.id13.com-买彩票上瘾怎么戒| www.432131.com-未来星时时彩平台| www.633747.com-长沙七彩-| www.48664.com-篮彩app排行榜| www.09300.cc-福彩aqq-| www.099988.cc-南方彩-| www.198575.com-有靠玩彩票生活的么| www.579041.com-金祥彩票v1-| www.33735.com-福利彩票新手入门| www.92100.com-顺丰彩票官网| www.302144.com-七星彩十大专家杀号| www.971941.com-彩com31彩票| www.815369.com-福利彩票视频型彩票| www.088076.com-足彩竟彩新浪网| www.180861.com-甘肃快三中奖号| www.261609.com-福彩广西基本走势| www.606212.com-彩界老翁独胆| www.92191.com-竞彩过关计算器| www.948791.com-下载本地万彩吧| 彩票驿站www.2350d.com| www.531159.com-彩铅手绘-| www.040481.com-七星彩怎么开奖| www.63oa.com-彩票免费大全| www.5345.vip-淘宝上能买彩票| www.31268.com-黑龙江福彩大家乐| www.022384.com-幸运飞艇时时彩| www.671082.com-福利彩票开心奖结果| www.2992.wang-3550幸运彩票| www.550460.com-大发快三总平台| www.963472.com-彩铅风景画教程图解| www.cp6138.com-福彩app-| www.60890.com-彩78彩票官方网站| www.140340.com-吉林快三规律口诀| www.266836.com-江苏快三预测号码| www.8555.vip-七星彩规律表本期| www.52242.com-电信换彩铃-| www.g99.cc-彩宝骗局揭秘| www.649698.com-线上博彩娱乐| www.251687.com-吉林快三软件微信群| www.432262.com-买十年彩票-| www.55dx.com-开封申请彩票销售点| www.883130.com-多彩投怎么算收益| www.969585.com-酷彩日本官网| www.877203.com-极速赛车彩票客户端| www.971541.com-快捷彩票合法吗| www.dr2.cc-七乐彩奖金对照表| www.635501.com-博彩有规律吗| www.373342.com-完美彩票咋样| www.19208.com-体彩app扫码兑奖| www.88900.cc-福利彩票3地速查表| www.69263.com-彩票361官方网站| www.272772.cc-福彩包括什么| www.533956.com-七星彩技巧与规律| www.521548.com-石家庄福利彩票| www.kr20.com-上海体彩官网首页| www.668.tv-重庆去时时彩官网| www.ls10.com-时时彩开奖号| www.2500.online外围体彩网站哪个好| www.300716.com-皇马彩票注册| www.zp84.com-福彩票3月24号| www.25872.com-彩虹的句子短唯美| www.96783.com-李永志彩票事件视频| www.312913.com-福彩3d行走势图| www.375195.com-福彩3d杀戮数方法| www.455647.com-深圳福彩区块链| www.530225.com-彩铅花卉教程| www.601554.com-体彩大乐透可以网购| www.665559.com-最新七乐彩预测| www.725952.com-极速三分彩全天计划| www.799730.com-下期福彩预测| www.873198.com-605彩票-| www.939309.com-福彩电话-| www.982202.com-上海福彩网下载软件| www.cp7368.com-什么叫快三彩票| www.863150.com-分分彩挂机推波方案| www.939615.com-福彩坊官方网站| 汇丰彩票www.hf0668.com| www.ev13.com-红牛彩票-| www.196605.com-彩票计划软件哪个准| www.315321.com-七彩坊运动内衣连锁| www.393592.com-今晚彩票是什么| www.132006.com-今日福彩三d开奖| www.243340.com-彩票赌博-| www.2ky.cc-时彩是不是合法直销| www.143259.com-彩虹团队的骗局| www.998580.com-上海体彩大乐透彩票| www.05pw.com-今日福彩几点开奖| www.3852.org-七星彩杀四位| www.9252.online黑彩票app-| www.52482.cc-快三是不是合法的| www.zy43.com-福利彩票新浪爱彩| www.61197.com-苹果手机版彩票| www.579320.com-火风彩票-| www.901.cc-福利彩票3d金码| www.46691.com-时时彩盘出租| www.101948.com-彩神登录入口| www.167134.com-福彩快3官网| www.0812.bid-我要看彩红宝宝| www.cai2511.com安徽快三开奖结果快| www.72fl.com-福彩3d天下无敌2| www.4952.cm-各种彩票破解方法| www.4412.net-福利彩票返利多少| www.19168.com-彩票主任-| www.cai0577.com宁夏快三实时走势图| www.9589.loan-彩61是合法交易| www.5409.cn-中福快三能赢钱吗| 华人彩票www.040419.com| www.888955.com-彩川ひなの图片| www.pn88.cc-彩868彩票-| www.26ew.com-福彩八宝饭-| www.2452.cc-双彩网3d字谜汇总| www.659183.com-欧洲杯足彩app| www.390938.com-全彩本子app| www.507531.com-九号彩票捷豹| www.573831.com-808彩吧网址| www.646456.com-足彩稳赢技巧| www.706226.com-专业玩彩胡先生| www.15573.cc-k彩网速-| www.63228.com-网易彩票足球推荐| www.6983.cn-七星彩大彩网| www.72297.cc-众购彩票线路导航| www.08087.cc-彩吧助手走势图势图| www.78182.cc-彩票的中奖概率是| www.ee06.com-大发快三最新邀请码| www.34018.com-赚钱网站彩票| www.654810.com-东方彩票网平台| www.665716.com-东方一分彩开奖网| www.606804.com-福彩三d毒胆王预测| www.700602.com-京彩e账户下载|