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.871891.com-江苏利彩开奖结果| www.51633.cc-好运彩彩票快三| www.017849.com-购双色球彩票| www.103416.com-丰彩中奖率高吗| www.183977.com-河北福彩3d预测| www.428569.com-分分彩什么玩法最好| www.3sk.com-500彩票股票| www.228675.com-河南彩色道路| www.9758.loan-动物十分彩票| www.61261.com-时时彩购彩助手| www.053853.com-世界杯足彩怎么玩| www.752629.com-浙江快乐彩十二选5| www.67gh.com-优选彩票-| www.865342.com-3d彩票图片-| www.x94.cc-体育彩票开奖r结果| www.796522.com-足球竞彩结果开奖| www.739997.com-体彩走势图有用吗| www.26959.cc-新浪彩票官网下载| www.334528.com-滴滴彩票怎么样| www.511336.com-彩虹取名-| www.6202.vip-名彩客栈双胆| www.51391.com-体彩幸运赛车走势图| www.022417.com-实时彩开奖号码| www.101255.com-新华网彩票频道| www.53216.cc-腾讯分分彩邀请码| www.077890.com-中国五分彩-| www.282351.com-时时彩最精准9码| www.813711.com-宁夏体彩开奖信息| www.ks.cc-广西福利彩票快3| www.45zt.com-必发彩票是不是黑彩| www.4699.vip-美的彩票投诉| www.028369.com-信博彩票怎么登录| www.180031.com-福彩快3袁老师看彩| www.319713.com-北京转让彩票站| www.635485.com-博彩头还是博彩头| www.806061.com-黑龙江正好彩票网| www.3812.net-体育竞猜彩票玩法| www.26256.cc-关于描写彩虹的诗句| www.92224.com-快彩为什么改时间| JJ彩票www.61040.cc| www.108290.com-彩票挂机方案贴吧| www.46708.com-时时彩下载ios| www.507244.com-彩票世界的永久官网| www.610987.com-彩虹六号搞笑视频| www.750559.com-乐玩彩票app| www.889934.com-旭辉研彩软件下载| www.53of.com-福彩双色球一注| www.2210.vip-哪里有彩票源码| www.7967.biz-香港博彩堂公式杀肖| www.35567.com-头条彩票首页下载| www.82627.com-九万彩票骗局| www.033427.com-乐彩网最新版本下载| www.0857.xyz-福彩双色球扫码查询| www.519785.com-时时彩推波高手改版| www.022459.com-重庆时彩小窍门| www.77283.cc-彩客网官网下载安装| www.253033.com-蓟彩芝-| www.026061.com-十分彩网可信吗| www.wj24.com-57彩票-| www.975464.com-大发快三三期倍投| www.946188.com-河南彩票481规则| www.239400.cc-快三输钱了怎么回血| www.ez91.com-黑客软件破解彩票| www.885759.com-内蒙快三怎么玩| www.lj82.com-建行的中彩啦靠谱吗| www.03vq.com-用彩铅画动漫少女| www.492314.com-北京今日快三中奖号| www.150471.com-神龙彩票-| www.253297.com-好彩快3-| www.352823.com-彩票中奖还负债| www.160765.com-258彩票开户| www.311809.com-体育彩排列五走势图| www.393557.com-新浪彩网是骗人的吗| www.cai7898.com白银快三走势分析| www.957914.com-七星彩49组包码| www.305673.com-彩票有必要坚持买吗| www.15el.com-红彩彩票网站| www.378272.com-幸运彩乐园网址| www.490889.com-现招聘彩票代玩人员| www.568629.com-中国彩票图-| www.652952.com-博彩概念股票有哪些| www.669742.com-中彩快印连锁大望路| www.903560.com-星光彩票正规的吗| 500彩票www.52072b.com| www.020081.com-竞彩限售-| www.640234.com-新浪爱彩安卓版下载| www.778490.com-88彩票手机版| www.62hr.com-中国河南体育彩票网| www.20186.cc-竞彩彩票网合法吗| www.019443.com-下载六合即时开彩| www.0137.vip-彩色的含义-| www.30nf.com-新浪彩票电脑板| www.362000.com-优购彩下载地址| www.560280.com-购彩网gcwcp| www.861280.com-体彩任选三规则| www.rl75.com-百盈彩票谁知道| www.41cf.com-七星彩福星-| www.527038.com-彩票工资车吧| www.617525.cc-万州体彩中心| www.s10.link-广西快三购买| www.60qk.com-6701彩票导航| www.zj30.com-江苏快三独胆怎么买| www.54gv.com-彩票遗漏分析软件| www.886.cm-彩票数字组合公式| www.029760.com-腾讯分分彩开奖源| www.716908.com-彩搜网东北王| www.898849.com-百信盈彩票是真的吗| www.dk13.com-恒博彩票平台| www.069150.com-体彩36-| www.152932.com-安微快三和值| www.27434.com-中国足彩比分网| www.65118.com-香蕉计划竞彩理财| www.007031.com-qq彩票在哪里兑奖| www.225033.com-厦门彩票骗局| www.8808.win-五分钟时彩-| www.41491.com-彩票程序开发| www.015666.com-七星彩为什么没人买| www.1590.cm-777彩票下载| www.01168.com-福彩3d精英心水网| www.55310.com-江苏福彩有哪些玩法| www.887372.com-澳客赢家彩票苹果版| www.180525.com-人人彩票网-| www.669835.com-体彩有几号码| www.9811.net-博客网彩票-| www.365790.cc-人人中彩栗-| www.64947.com-投彩跟计划骗局| www.2310.vip-3d图吧彩吧-| www.133579.com-500w彩票网网址| www.212291.com-黑彩-| www.375132.com-竞彩2串1的优惠| www.22563.com-彩票开奖大厅公众号| www.60472.com-福气彩票站-| www.019691.com-分分彩票官网下载| www.074577.com-当彩票打票员累死了| www.133470.com-福彩3d银海布衣| www.219547.com-北京快乐彩开奖记录| www.279781.com-彩票时时乐开奖查询| www.338325.com-几百期彩票-| www.415100.com-竞彩5串6多少钱| www.509561.com-利彩亲彩票-| www.563720.com-中彩彩票快3网址| www.644636.com-足彩最新伤停情况| www.720033.com-买七星彩的诀窍| www.209349.com-福彩排5开奖号| www.397457.com-怎样看待彩票规律| www.537570.com-彩色的什么词语填空| www.cai3939.com彩票屠龙是什么意思| www.el16.com-一分快三免费下载| www.189966.cc-十分快三是什么彩票| www.869404.com-安装大公鸡七星彩| www.062151.com-大发彩票是真的吗| www.20255.cc-深圳福彩中心电话| www.59233.com-5d彩色打印机| www.12fc.com-安徽省彩票中心| www.79je.com-时时彩后四推波| www.722345.com-福彩3d的开奖公告| www.681917.com-天天中彩票微信提现| www.1226.com-彩计划app登录| www.667155.com-3b福彩实战擂台| www.745444.com-顶级彩票99299| www.794814.cc-新彩吧图谜-| www.212927.com-私彩官方如何作弊| www.330470.com-体育彩票有哪些数字| www.457282.com-944cc天天好彩|