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.452214.com-山西时时彩开奖结果| www.881324.com-三地彩吧助手走势图| www.978781.com-好彩高手论-| www.co34.com-温州快三综合走势图| www.j96.net-深圳体彩网点申请| www.61461.com-中华彩票平台| www.78171.com-大乐透专家牛彩版| www.102614.com-购买福彩-| www.621964.com-688彩票网-| www.419200.com-下载彩票易网下载| www.850334.com-真福彩胆码早早报| 500彩票网www.61655y.com| www.609619.com-淘宝上能买彩票| www.317598.com-快三职业彩民| www.la55.com-江苏快三号码统计| www.cp8330.com-快开福彩三分钟一次| www.700617.com-彩票撕坏了还能兑奖| www.848198.com-古建彩绘颜料价格| www.821282.com-7星彩票走势图大全| www.953985.com-彩票诗迷-| www.zu4.com-彩票开奖计划网| www.vx21.com-七星彩走势图2元网| www.ng29.com-吉林快三三同号遗漏| www.396910.com-长沙市体彩中心电话| www.841026.com-大福彩票-| www.175588.com-江西多乐彩开奖号码| www.328474.com-彩容网触屏版| www.tr74.com-彩之家是正规的吗| www.870684.com-彩票印象客服| www.400122.com-台码福星彩资料| www.549899.com-苏州体彩网点| www.688373.com-彩票3d群-| www.818067.com-排列三天吉彩票图谜| www.989713.com-u9彩票是骗局吗| www.zs68.com-彩票36选5-| www.015773.com-七星彩网上投注| www.727508.com-大福彩票算违法吗| www.1916.org-彩票频道万彩吧| www.eo18.com-百盈彩票下载| www.262570.com-彩猫-| www.305262.com-体彩19036-| www.015890.com-幸运彩票提现| www.119672.com-一分快三怎么计算机| www.202175.com-河北体彩-| www.978278.com-中福网彩票预测| www.505684.com-黑彩受骗-| www.751544.com-体彩大乐透选号秘籍| www.335223.com-快乐双彩开奖| www.541173.com-亚洲有哪些高频彩票| www.845612.com-竞彩体彩足球| www.941184.com-阿里彩票是违法的不| 大赢家彩票平台www.375963.com| www.2145.org-越南彩票网站| www.578137.com-时时彩害人家破人亡| www.486223.com-我想玩国彩谁带我| www.69286.cc-海口彩票手机版下载| www.509336.com-瑞彩祥8官方下载| www.201501.cc-怎样用手机买七星彩| www.003730.com-腾讯分分彩团队计划| www.605370.com-彩晶膜生产厂家| www.918872.com-今日彩神通关注| www.ej29.com-网上购彩最新消息| www.4282.org-k345cc天空彩| www.392235.com-山东体彩扑克牌| www.l13.org-彩深绿怎么回事| www.20614.com-男彩托的套路| www.515753.com-领彩票-| www.209681.com-万豪彩票安卓版| www.071058.com-足彩招聘-| www.294466.com-福利彩票贴吧| www.510513.com-彩虹的约定左右简谱| www.611297.com-彩票网站贷款| www.691636.com-足球胜负彩比分| www.760326.com-彩票五星乐彩提款| www.872609.com-湖南体彩中心| www.931286.com-福彩客服电话| 大赢家彩票平台www.791397.com| www.237488.com-福彩兑奖规则| www.036367.com-武汉高频彩11选5| www.88zc.cc-彩票投注站成本| www.075587.com-7彩膜-| www.418878.com-高频彩票直播频道| www.158911.com-北京彩票中心地址| www.997835.com-七星彩酷浪最新彩版| www.ww15.com-糖果派对彩金视频| www.53do.com-彩票行家免费资料| www.081177.com-彩票数字最大到多少| www.69060.com-卖彩票需要什么手续| www.85229.cc-珠海恒彩酒店| www.85225.com-彩票最多中多少| www.666002.com-新加坡彩票如何买| www.804772.com-七乐彩一周开几次| www.896530.com-华夏彩票平台合法吗| www.962924.com-彩神通代理会员用| 彩客网www.727076.com| www.220987.com-手机中彩网wap| www.609249.com-海南七星彩解梦号码| www.wl37.com-中彩啦app安卓版| www.900355.com-3d复式投注彩票图| 9号彩票www.80767f.com| www.411124.com-竞彩足球稳胆是什么| www.555117.com-江苏快三是不是骗子| www.2677.com-中了体彩哪里领| www.38zi.com-头彩发饰加盟连锁| www.661764.com-足彩中奖金额算法| www.739712.com-e77乐彩线路检测| www.988712.com-中彩手彩票大全| www.sz2.com-江西快三号码推测| www.83262.com-彩票平刷思路| www.083676.com-网上博彩是违法的吗| www.159623.com-快三二不同13| www.cb8.com-广西快三推测| www.3901.cn-k7彩票-| www.887679.com-阿里彩票开多久了| www.69wq.com-在线彩票计划| www.532908.com-梦书解梦七星彩打架| www.595945.com-梦见去彩票站兑奖| www.659349.com-写博彩源码违法么| www.729112.com-在哪买彩票最安全| www.796185.com-福彩选号方法| www.856007.com-360足球竞彩网| www.912472.com-河南福彩网勇士争先| www.964736.com-澳门足彩即时赔率| 福彩www.15355g.com| www.iz88.com-福彩七乐彩游戏玩法| www.583930.com-福彩走势图有没有用| www.778470.com-彩之乐是什么网站| www.934896.com-下载快乐彩走势图| www.jw33.com-彩铅画画教程| www.647654.com-智胜彩票平台| www.736355.com-彩虹岛吧-| www.802407.com-竞彩总进球数规律| www.892871.com-金博彩票网站| www.949284.com-福彩跨度表-| www.999366.com-足彩工作人员买吗| www.bx13.com-江苏快三豹子预测| www.st49.com-彩票规律-| www.134361.com-好彩香烟大全| www.038562.com-五省快三对比| www.941248.com-彩票吧平台对刷| www.mp91.com-九宫图算法彩票| www.090895.com-重庆体彩兑奖中心| www.858121.com-国家控制彩票| www.068079.com-彩票网站开发制作| www.2374.win-好彩app下载安装| www.350381.com-手机彩膜制作软件| www.444540.com-彩票6加1开奖查询| www.544300.com-黑彩代理怎么返点| www.925535.com-体彩店内布置图片| www.975848.com-林州彩礼价目表| 中华彩票www.914902.com| www.311669.com-甘肃福彩开奖结果| www.400618.com-七星彩第一位走势| www.609397.com-彩票买3注多少钱| www.718063.com-彩票报刊-| www.756271.com-中彩游戏-| www.806929.com-浙江福彩销售点申请| www.952007.com-6617彩票址导航| www.zs79.com-七彩网络查成绩入口| www.79oj.com-大发快三最高邀请码| www.56793.cc-时时彩龙虎具体玩法| www.037813.com-乐彩网大神计划| www.kh97.com-快三秒奶茶配方| www.782.mobi-幼儿彩虹画图片大全|