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.956503.com-富贵彩平台-| www.070962.com-河南省彩票兑奖中心| 大奖彩票www.99djcp.com| www.52661.cc-好彩门户天下好彩| www.32331.cc-8k彩票哪里下| www.77336.cc-福彩3d网冠彩彩报| www.4764.org-彩虹六号怎么禁播了| www.4854.biz-彩票快3开奖号| www.81808.com-玩快三能赢钱吗| www.435463.com-都匀开彩票-| www.971.cm-七星彩算法技巧视频| www.8728.pw-新彩网吧-| www.664040.com-众彩网怎么打不开机| 凤凰彩票www.66652n.com| www.2600.wang-关于最新诈骗彩票| www.06804.com-吉林快三网站| www.82ek.com-极速赛车彩票诀窍| www.838648.com-竞彩变盘啥意思| www.0179.org-重庆时时彩天天计划| www.7308.org-彩虹六号联赛| www.605517.com-吉祥彩官网下载安装| www.687017.com-买彩票中奖的感觉| www.769976.com-彩票线上购买| www.070196.com-龙虎彩票骗局| www.967659.com-呼市福彩中心| www.cai6122.com贵州省快三开奖| www.025478.com-体彩481奖金规则| www.129132.com-北京福彩双色球规则| www.208004.com-甘肃快三定牛| www.277830.com-90彩票下载-| www.4980.cc-彩票平台怎么赢| www.6761.xyz-多彩乐吉林快三| www.vu65.com-江西彩票快三走势图| www.234.cn-希腊10分钟彩票| www.6078.cm-怎样用奇门测彩| www.1663.net-褔彩3d五行走势图| www.8671.cc-财神会彩票正规吗| www.4201.win-七彩通达-| www.07607.com-七星彩守号码| www.ld46.com-中国福利彩票开奖| www.8989.live-彩票彩彩票开奖结果| www.902244.com-黑彩坐庄也能输吗| www.966162.com-江苏快三怎么赚钱| 瑞彩网www.980158.com| www.12655.cc-88彩下载-| www.132.cc-福州福彩中心地址| www.127185.com-竞彩网触屏版| www.136626.com-大彩鲸快三助手下载| www.09bs.com-宝马彩票是骗局么| www.100562.com-中发福彩快三网址| www.281765.com-小鹿彩票软件| www.356750.com-财务彩票-| www.88763.com-新乐彩网址-| www.124066.com-燕赵福彩排列7| www.200921.com-体彩481投注技巧| www.513446.com-三分钟时时彩规律| www.584652.com-苏宁彩票是真的吗| www.660980.com-南方彩票网址| www.221719.com-彩票黑客-| www.c13.club-福彩三的和值表视图| www.456510.com-欢乐彩票提现| www.892220.com-一分快三计划全能版| www.16278.com-彩票人工计划客户端| www.199768.com-上海快三遗漏数据线| www.303758.com-福彩3d真实谎言| www.177306.com-玩彩票快三-| www.811758.com-3d家彩网断组| 易彩网www.99638c.com| www.958817.com-体彩几天开一次奖| www.cp6377.com-体育彩票6+1| www.035811.com-幸运10时时彩| www.331109.com-0234大发彩-| www.310782.com-安徽快3彩票| www.882578.com-重庆三分彩是真的吗| 福彩www.86267o.com| www.12318.cc-福建福彩快讯报| www.812522.com-福彩3d书-| www.850197.com-比特币分分彩怎么玩| www.n09.cn-吉林快三派奖网| www.6088.cc-网上彩票投注平台| www.082607.com-118彩票平台下载| www.157012.com-七星彩高手一论坛| www.5752.biz-彩票开发定制专家| www.863597.com-体彩的标语-| www.fw30.com-手机彩票投注站官网| www.79944.com-江苏快三独胆玩法| www.53344.com-新型私彩平台出租| www.315613.com-时时彩投注平台网站| www.679098.com-十分彩跟永9购| www.253767.com-一分时时彩走势图| www.444607.com-黑牛吧3d全彩| www.893012.com-瑞彩祥云注册| www.cai9678.com七星彩近500期| www.x22.cn-七牙彩开奖-| www.24wt.com-福利彩票机转让信息| www.33410.com-凤彩网双色球图库| www.96763.cc-外围足彩代理| www.17618.com-足够竞彩比分| www.93218.com-快三试机号今天是| www.693489.com-体彩大乐透怎样兑奖| www.256862.com-北京快三计划哪里有| www.605722.com-吉祥彩票软件下载| www.41bc.com-龙虎时时彩走势图| www.18261.cc-彩票模拟摇号| www.739389.com-体彩编号-| www.390758.com-下载8号彩票| www.652809.com-贵州快三推选号| www.719520.com-玩快三群-| www.788966.com-十四场胜负彩星号| www.861582.com-彩界过客胆码| www.942071.com-中国彩票合买网| 六福彩票www.66ffj.com| www.ju25.com-《星空》画彩铅教程| www.0091.cc-七星彩最近50期| www.628885.cc-天天中彩票邀请码| www.190888.com-人人彩票是不是骗局| www.226339.com-河北省福彩排列五| 辉煌彩票www.2875y.com| www.mu74.com-官方彩票平台有哪些| www.526963.com-英国幸运五星彩走势| www.234929.com-福利彩票安卓下载| www.13yn.com-福彩兑奖细则| www.2828.net-凤凰彩票是不是真的| www.199751.com-泰安体彩-| www.266288.com-彩票套路-| www.016554.com-足彩分析师排行榜| www.062814.com-博盈彩票-| www.253563.cc-彩之家网址g| www.236727.com-105彩票网址| www.056816.com-河北福彩3d字谜| www.87266.com-一分赛车彩票怎么玩| www.208133.com-快三注册平台下载| www.163967.com-北京快3北京福彩网| 网易彩票www.504033.com| www.464906.com-竞彩群吧-| www.533365.cc-专业福彩app| www.588222.cc-福彩三d组六走势图| www.14350.com-大乐透彩票app| www.399268.cc-七星彩开奖号码35| www.665645.com-正德体彩app| www.733780.com-河南开封彩礼多少| www.449432.com-湖北体彩大乐透大奖| www.952359.cc-彩票店电视买怎样的| www.zp61.com-高频快开彩票要停了| www.2382.pw-七彩山鸡苗那里有卖| www.5104.cm-彩票机选好还是| www.016326.com-中彩彩票开奖助手| www.095228.com-浙江12选5爱乐彩| www.150779.com-福彩快三诈骗手法| www.83864.com-镇上买彩票-| www.037161.com-下载福利彩票app| www.133998.com-哪里有卖好彩香烟的| www.318240.com-小班彩虹伞教案| www.425694.com-官方福彩中心| www.558492.com-彩博888平台怎样| www.82dq.com-西宁体彩哪里领奖| www.603381.com-好友彩票平台维护| www.684883.com-爱投彩票可靠吗| www.769592.com-好彩门户正版资料| www.836208.com-喜中彩票彩天下| www.910217.com-找福利彩票群英会| www.966116.com-体彩六码遗漏统计| 天天乐彩票www.281380.com| www.394808.com-彩虹代挂网源码|