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.456184.com-彩票中奖的死人| www.923037.com-今日彩票占卜| www.984470.com-随机率与福彩3d| www.ku8.com-幸运快三有规律吗| www.6331.top-3d彩票几天一开奖| www.037501.com-乐彩网猜大小和单双| www.234576.com-乐彩网3d论坛| www.92ys.cc-什么是彩票代打| www.22543.com-手机买彩票犯法吗| www.119709.com-全民快三代理| www.313619.com-xy3550彩票-| www.513134.com-郑州乐彩科技| www.727650.com-体彩小将去哪里兑奖| www.g04.cc-大数定律彩票应用| www.vx55.com-河北快三彩票| www.1962.cc-3d彩吧第五版| www.006736.com-甘肃快三怎么了| www.163966.com-中国体彩容错表| www.dl07.com-118彩票坑人| www.31rn.com-v8彩票在线购买| www.5081.vip-现在足彩合法app| www.50080.cc-投彩网app下载| www.089527.com-阿里彩票app| www.307792.com-凤凰彩票时时彩| www.501303.com-易彩堂是什么公司| www.679296.com-老公买彩票-| www.896688.com-八八彩票官网手机版| www.853363.com-拉菲彩票下载安装| www.968924.com-澳门彩金成功退货| www.eh04.com-福建体育彩票论坛| www.17oi.com-下载腾讯60秒彩| www.8829.in-南方新彩网-| www.525755.com-网络彩票服务器| www.781339.com-沉迷微信群黑彩| www.931068.com-长春体彩中心| www.76907.com-足彩胜负彩销量| www.96148.com-竞彩理论知识| www.091610.com-轩彩娱乐app| www.1813.me-爱米彩票app网址| 中华彩票www.897957.com| www.63891.cc-胜负彩14场都中了| www.535890.com-中了彩票低调| www.929678.com-86人工彩票计划网| www.gq48.com-彩色纸箱供应厂家| www.648.cm-黑客盗取私彩平台钱| www.475836.com-五行中彩票-| www.983549.com-彩票66倾家荡产| www.137763.com-七星彩在线缩水工具| www.328901.com-牛彩网彩摘网吧论| www.644009.com-彩票周末可以领奖吗| www.004960.com-体彩6十1开奖时间| www.dz10.com-福彩通网址是多少| 幸运彩票www.739366.com| www.040103.com-中彩神-| www.269835.com-彩九ios下载| www.585190.com-网易时时彩专家预测| www.773.me-儿童彩色画-| www.008881.cc-qq上说彩票挣钱| www.543074.cc-今天福彩图-| www.112057.com-足彩宝典-| www.704444.cc-黑彩大小双单| www.089909.com-腾讯分分彩开奖查询| www.4545.tv-七星彩中奖号码表| www.424216.com-福彩3d有多长时间| www.798306.com-彩票软件计划哪个好| www.51jx.cc-教水彩的软件| www.961559.com-黄金分割与彩票| www.100209.com-一定牛彩票是假的吗| www.028779.com-百度上可以买彩票吗| www.bx68.com-81彩票app-| www.538271.com-2月23号体育彩票| www.277853.com-博牛彩票是干嘛的| www.d38.com-彩票查看结果| www.573113.com-51彩虹手机版登录| www.788685.com-怎么看足彩投注量| www.8723.cm-2001年福彩-| www.008917.com-腾讯75秒彩票| www.pz26.cc-百盈快三走预测| www.047877.com-福彩排列3走势图| www.371699.com-中国足彩馆鸽宝原创| www.676838.com-彩妆批发进货渠道| www.ur37.com-名人彩票注册| www.813969.com-彩票领先团队骗局| www.48989.com-全民赢彩票怎么样| www.376521.com-玩时时彩靠谱吗| www.305617.com-中国的彩票能中奖吗| www.229510.com-快三彩票玩法| www.156.date-彩虹的歌词周杰伦| www.114459.com-彩票丧辉-| www.407062.com-取消彩票平台代理| www.so53.com-今日彩票预测3d| www.968097.com-彩世塔案-| www.dy54.com-老快三游戏下载| www.1355.vip-12彩票app苹果| www.986451.com-彩票的漏洞-| www.122416.com-时时彩最好的买法| www.691514.com-十四场足彩比分| www.52zd.com-新粵彩家家好彩| www.129492.com-易众彩店怎么样| www.ba74.com-内蒙古体彩兑奖中心| www.946583.com-河南商丘夏邑彩礼| www.931990.com-699彩票下载安装| www.094801.com-中央专项彩票公益金| www.237857.com-深圳福彩官网| www.063815.com-致富彩票主页| www.017251.com-盛大彩票安全吗| www.752557.com-彩票到底有没有人中| www.891545.com-梦想彩票站首页| www.664381.com-七星彩头尾表图| www.571400.cc-快三四码红什么意思| www.26uh.com-外省彩票怎么兑奖| www.369515.com-云彩店彩票网页版| www.aq27.com-快三胆拖怎么玩| www.mk48.com-重庆分分时时彩| www.0551.tv-彩票趋势-| www.356849.com-体彩彩票复式号| www.556962.com-快乐彩被骗-| www.ii5.com-彩票平台信誉排行榜| www.22884.com-时时彩平刷绝不连挂| www.230223.com-上海体彩中心| www.756078.com-中国福彩网北京快三| www.94gq.com-体彩排列三和值字谜| www.15266.cc-浩博时时彩手机版| www.378527.com-微信七星彩群| www.093912.com-35彩票害人输千万| www.277531.com-买七星彩能中大奖吗| www.3049.com-500极速彩票| www.035286.com-福彩3d组三单式| www.899665.com-幸运彩开奖-| www.lq52.com-旺彩3d-| www.48fs.com-七星彩尾号走势图| www.29199.com-wcp玩彩票网| www.028513.com-乐彩网首页首页| www.226592.com-单机游戏大全快三| www.732815.com-下载内蒙福彩一| www.160250.com-182彩票-| www.316378.com-大通彩票app下载| www.572510.com-彩票扫描对奖| www.162231.com-彩之家彩票预测网| www.0vv.com-彩虹瓶子txt| www.062630.com-鸿运彩票是不是真的| www.0585.xyz-网友教我做彩票| www.537915.com-七彩石-| www.848198.com-古建彩绘颜料价格| www.930736.com-满堂彩下载app| www.it61.com-彩票怎么买的| www.98337.cc-中国竞彩网官方客服| www.964191.com-彩乐乐彩票网官网| www.560129.com-网购彩导师-| www.766002.com-彩之源app注册| www.566.pw-极速赛车彩票规律| www.036367.com-武汉高频彩11选5| www.75ra.com-好彩店彩票软件下载| www.056029.com-彩票机有几种玩法| www.413890.com-网络彩播是什么意思| www.0906.org-七星彩对联图片大全| www.fv1.com-不怕挂时时彩方案| www.769.in-时时彩改码诈骗| www.108523.com-网易彩票开奖查洵| www.85978.com-彩铝是铝合金吗| www.174363.com-快三贵州今天走势图| www.539892.com-姜丽谢俊娟快三教学| www.776436.com-时时彩票怎么玩才赚| www.905762.com-网络黑彩处罚|