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.263537.com-手机在线app体彩| www.6020.cn-山东体彩兑奖在哪里| www.ew07.com-中彩手彩票官方网站| www.822536.com-福彩金码千禧| www.933898.com-女孩玩彩票是下套么| www.999612.com-爱乐彩11选五5| www.ce44.com-快三赚到钱吗| www.xn17.com-快易彩票app下载| www.35qf.com-竟彩开奖查询| www.64cz.com-南通童彩-| www.107036.com-福彩七乐彩兑奖规则| www.065683.com-彩客网手机版完整版| www.578785.com-凤凰重庆时时彩平台| www.707339.com-彩票高手选号秘笈| www.833075.com-彩77怎么下载| www.950565.com-乐彩客ios版本| www.cai791.com-快三奖金对照表| www.6272.top-三分时时彩规律大全| www.130231.com-sd彩票-| www.65rz.com-十四彩推荐-| www.505274.com-福彩3d现场直播| www.579424.com-彩字谜语-| www.654809.com-旺角彩皇现场开奖| www.739428.com-518彩票官方注册| www.817732.com-体彩胆码杀码图库| www.890617.com-手机彩票能不能玩| www.960421.com-彩票亿元大奖| 彩多多www.78949p.com| www.828673.com-福彩3d胆拖速查表| www.103774.com-彩票争霸靠谱吗| www.81zl.com-陕西省福彩中心电话| www.689.tv-啥叫私彩平台| www.813147.com-久久发彩票龙虎斗| www.902308.com-开黑彩判刑多久| www.971897.com-彩拾网站-| www.634008.com-七彩联盟有哪些学校| www.78364.com-福彩3d8码博客| www.19kd.com-肥城新城路体彩站| www.wt76.com-乐和彩开奖号码| www.0161.xyz-a8彩票-| www.25122.com-彩铅画新手教程视频| www.97510.com-彩票官方注册| www.062982.com-中国福利彩票网加盟| www.915132.com-体彩天下快三大发| www.805402.com-七乐彩特等奖| www.53sl.com-遵义市体彩中心地址| www.088914.com-168彩-| www.751441.com-淘之家彩票-| www.965510.com-楚天福彩精彩十分| www.550856.com-彩票全网-| www.652332.com-上海分分彩-| www.722861.com-彩票会不会有假| www.90101.com-七彩视界最新版本| www.082823.com-众信彩票平台合法吗| www.320377.com-360彩票购采大厅| www.108575.com-足彩胜平负开奖结果| www.391150.com-手机336彩下载| www.688636.com-福彩热线可以投注吗| www.732191.com-乐汇彩票-| www.828638.com-香港6118彩票| www.179424.com-彩票双色球-| www.277314.com-奇门测彩密法| www.369892.com-中国体育彩票贴吧| www.535120.com-全民彩票时时彩| www.647099.com-江苏快三遗漏360| www.01mb.com-彩虹是什么颜色| www.5796.vip-体彩扑克牌中奖奖金| www.15544.com-怎么算快三-| www.69460.com-和八马彩票差不多| www.830.in-哪里可以看体彩直播| www.71sz.com-中国福利彩票文章| www.75lx.com-彩票不亏本刷流水| www.081028.com-男子一亿买彩票赔了| www.140036.com-福利彩票领奖银行| www.946990.com-宝赢彩票软件破解版| www.31398.com-大掌柜彩票怎么样| www.595252.com-福建快三全天计划| www.cp917.com-全国快三下载| www.911999.cc-代刷彩票流水| www.976910.com-河南巨奖彩票图| www.wu8.cc-河南快三111遗漏| www.953659.com-香港的福彩-| www.85ir.com-105彩票合法| www.0419.in-精彩音乐汇歌曲列表| www.104677.com-足彩竞彩直播| www.162132.com-福彩3d大小走势表| www.445653.com-吉林彩票中奖| www.528357.com-头彩彩票app下载| www.971180.com-彩票六个号码怎么选| www.cp3135.com-新快三单机游戏下载| www.qi46.com-福彩好彩1开奖结果| www.48gr.com-体彩超级大乐透官网| www.648840.com-彩宝的种类-| www.707985.com-喜来登彩票下载| www.645133.com-浙江体彩到哪领奖| www.708371.com-鸿运彩票百度贴吧| www.772759.com-时时彩稳赢计划下载| www.844112.com-体彩专管员压力| www.087601.com-云彩彩票app下载| www.0385.me-百盈快三辅助| www.49187.com-彩娃彩票平台代理| www.002004.com-釉彩大瓶成分| www.90460.com-快三和值追号计划| www.048300.com-百宝彩票公司| www.924044.com-大乐彩透-| www.776063.com-火箭彩票下载安装| www.871304.com-彩票大家赢走势图| www.948705.com-微信玩快三是真的吗| 500彩票网www.65707h.com| www.11001.com-竞彩足球比分新浪网| www.79479.com-玩彩微信交流群| www.178268.com-福利彩票软件下载| www.518522.com-u58发发彩下载| www.591939.com-中国竟彩网胜平负| www.190534.com-快三河北开奖| www.222836.com-牛蛙彩票生肖对照表| www.iz5.com-江苏快三有什么规律| www.746633.com-冀彩宝可信吗| www.858044.com-动物彩票怎么玩| www.912428.com-快三彩票大平台| www.088670.com-打彩票是干什么的| www.332325.com-京彩娱乐官网| www.356929.com-体彩门头牌匾| www.381547.com-七星彩号码查询| www.519047.com-彩票站知道谁中奖吗| www.586552.com-83彩官网下载| www.662739.com-078彩票免费计划| www.31916.cc-竞彩比分唯彩| www.3839.shop-海南七星彩局网图纸| www.768477.com-爱乐彩票之类的软件| www.848159.com-永利皇宫时时彩| www.903234.com-彩票开奖公告大全| www.964867.com-彩票数学原理| 九州彩票www.6769b.com| www.656697.com-亿彩彩票是合法的吗| www.723718.com-南方彩票网预测| www.785119.com-七星彩跨度技巧| www.846677.com-彩票中奖真假| www.894956.com-南方够彩网-| www.30550.com-京东彩票赛车| www.990349.com-彩票数字的奥秘| www.355384.com-彩乃奈奈百度云图片| www.527372.com-时时彩怎么对压互补| www.626756.com-本期管家婆彩图库| www.31fa.com-昨天晚上福彩| www.0865.cm-福彩怎么扫码兑奖| www.26535.com-808七星彩规律图| www.9xy.cc-中华彩票报纸电子版| www.8zh.com-中国体育彩票资料| www.525027.com-腾讯分分彩百度贴吧| www.77vh.com-怎样买美国彩票| www.588786.cc-全民免费彩票可靠吗| www.839937.com-竞彩篮球的可靠软件| www.go24.cc-好彩烟多少钱一包| www.415442.com-新浪爱彩竞猜| www.5328.top-西雅图彩票app| www.219817.com-北京快三群-| www.287395.com-香港供彩社区| www.353444.com-下载掌上京彩app| www.982551.com-同城彩票app下载| www.sp.cc-快3彩票下载安装| www.8580.in-易彩堂是什么| www.31712.cc-易彩彩票选号走势图| www.69as.com-金冠彩票下载平台|