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.8256.com-江西快三和值推荐号| www.41291.com-有什么彩组词| www.962391.com-旺旺彩票快3| 500彩票www.645477.com| www.jn93.com-彩票黑平台不能提现| www.d33.com-足彩ai预测-| www.43hz.com-有没有网上卖彩票的| www.nx57.com-轻松驿站彩票| www.02oq.com-360彩票厅-| www.95sf.com-快彩真的能赚钱吗| www.90292.com-体彩超级大乐透直播| www.763336.com-体育彩票店开到几点| www.946792.com-蓝宇彩钢围挡| www.999902.cc-笫一彩票01cc| www.ds49.com-自助彩票机合法吗| www.045886.com-彩83苹果下载| www.154397.com-竞彩赔率表-| www.071899.com-白小姐旗袍2彩图| www.821751.com-惠州福彩店转让信息| www.956443.com-富贵彩害死了| www.cp1691.com-内蒙古度福彩快三| www.tv49.com-类似彩名堂app| www.34td.com-尊彩上做兼职可信么| www.7695.top-士乐彩开奖号| www.32533.com-会员登录彩票| www.002297.com-彩票站有定位胆的吗| www.114340.com-彩票选号软件怎样| www.217675.cc-五星彩票app下载| www.325979.com-彩宝软件下载官网| www.448660.com-全能彩票软件| www.570130.com-七彩视界最新版| www.666511.com-彩票分析师工作内容| www.827980.com-如何举报彩票app| www.925776.com-香港资料彩富大全网| 网易彩票www.516105.com| www.rc65.com-快三开奖贵州快三| www.26lh.com-所有快三公式| www.3219.win-藤井有彩48小时| www.23165.com-彩神争8网页手| www.80878.com-排列五是不是福利彩| www.068123.com-彩票计划软件苹果版| www.167067.com-大发快三精准计划| www.cp0306.com-北京快三软件| www.pl08.com-福彩自助北京快三| www.254769.com-好彩网能赚钱吗| www.372400.com-65彩票下载-| www.525256.com-重庆福彩店-| www.647626.com-大富翁i8彩票| www.792103.com-一定牛彩票网正规吗| 55彩票www.755740.com| www.vu61.com-彩票k线图走势分析| www.31lt.com-奇门遁甲测香港港彩| www.1723.wang-助赢彩票软件下载| www.9461.vip-美国彩票23亿是谁| www.74641.cc-网球彩票怎么买| www.75yp.com-彩票打水套利原理| www.929723.com-广州快三-| www.415566.com-押大小的彩票| www.1ua.com-欢乐快三开奖| www.722078.com-黑龙江福彩中心| www.255426.com-大发快三网址多少| www.s56.cn-发发彩票-| www.543304.com-彩天下全球最快码| www.454855.com-金冠彩票大发快三| www.751159.com-彩巴士-| www.8766.org-福利彩票的概率| www.876524.com-今日彩票老黄历| www.ka.com-彩票随机选号器在线| www.44218.cc-彩易网字谜图谜大全| www.lg9.cc-彩票口诀大全| www.17dm.com-河南快三组合走势图| www.6869.cn-福彩网充值代理平台| www.463927.com-97彩票是不是真的| www.591509.com-永利彩票app下载| www.685218.com-彩票网1216-| www.315644.com-彩虹破坏机-| www.583388.com-彩神国际代理| www.987725.com-彩票888下载| www.tk13.cc-快三猜骰子猜和值| www.65zs.com-湖北体彩客户端| www.761246.com-好彩票怎么下| www.082515.com-神圣彩票app下载| www.cp1987.com-福彩3d试机号今天| www.327178.cc-新华彩票58748| www.9473.org-彩票统计分析| www.519073.com-时时彩开奖大小结果| www.3440.org-彩票站微信营销| www.441566.com-彩票开奖福彩双色球| www.799800.com-送彩金白菜qq群| www.fc7.com-重庆时时彩开奖直播| www.430163.com-重兴时时彩开奖结果| www.3765.in-七乐彩胆拖投注金表| www.43434.com-彩票预测公众号| www.744.bid-红牛网六彩资料| www.40um.com-体彩大乐透元旦放假| www.65356.cc-西宁福彩中心电话| www.682446.com-如何网上购足彩| www.091088.com-福彩快三开奖视频| www.020964.com-福彩76期开奖号码| www.190860.com-快三图片-| www.397025.com-万国彩票app| 金冠彩票www.c4527.com| www.280639.com-乐玩彩-| www.178813.com-体彩浙江6+1| www.420297.com-体育彩票装修| www.9103.cm-水溶彩铅画人物图片| www.521662.com-7乐彩今晚开奖结果| www.882641.com-棒棒彩票合法吗| www.006914.com-五分彩破解器| www.270086.com-567彩票注册| www.567112.com-体彩竟彩怎么玩| www.980463.com-广西体彩网上投注| www.565397.com-彩票黑客软件下载| www.175197.com-百姓彩票app下载| www.63387.com-足彩19041彩果| www.117994.com-彩票数学模型| www.4825.cc-福彩三d天齐网图谜| www.275201.com-澳彩网首页-| www.370127.com-28cc天下彩| www.633576.com-河南七乐彩-| www.hz95.com-快三单双大小买法| www.089858.com-马耳他瓦莱塔彩票| www.635822.com-七彩云南娱乐麻将| www.415009.com-竞彩让球投注绝招| www.64641.com-腾讯一分彩稳赚技巧| www.7281.cc-儿童画彩虹的图画| www.996520.com-龙江体彩网-| www.143592.com-炫彩字体-| www.081862.com-博荣彩票下载| www.381496.com-彩票礼拜五开什么奖| www.1095.cn-竞彩如何分析欧赔| www.000222.com-多彩网app-| www.226717.com-广西福彩手机客户端| www.180974.com-河北快三一定牛遗漏| www.879126.com-智慧彩票准吗| www.ai93.cc-我想查一下福利彩票| www.242642.com-福利彩票双色球下载| www.866657.com-3d彩票采摘首页| www.67st.com-彩票四等奖在哪里领| www.9280.loan-彩99苹果官方下载| www.098228.com-3d福利彩票走势图| www.654670.com-心灵码仙七星彩最新| www.73jv.com-牛头炫彩皮肤| www.160826.com-体彩福彩-| www.853286.com-拉菲2彩票-| www.089196.com-168彩票假吗| www.892232.com-尼彩手机在哪买| 大赢家彩票平台www.950596.com| 818合彩www.www.9889hc.com| www.935788.com-彩神平板打印机价格| www.5872.biz-廊坊体彩中心电话| www.ik05.com-500万彩票网登录| www.377139.com-因为彩礼钱分手微信| www.15rq.com-彩礼20万多吗| www.974208.com-全民彩票28-| www.1916.net-七星彩雷州梦册查奖| www.59093.com-中彩易下载-| www.682059.com-中密无极彩票软件| www.66uv.com-体育彩票22选5| www.283937.com-彩票是几位数| www.126846.com-52快三-| www.526351.com-时时彩全包号技巧| www.800920.com-三d天天彩报纸| www.025492.com-购彩网正规吗|