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天

知道了
亚洲28 www.ff54.com-福利彩票十分钟开奖| www.323280.com-体彩nba赔率| www.5081.pw-如何用手机买福彩| www.583070.com-汇彩网入口-| www.662373.com-七星彩停售时间放假| www.785183.com-福彩双色球是个骗局| www.875041.com-熊猫竞彩官方app| www.952970.com-广东彩票-| 500彩票www.50080p.com| www.7938.wang-京彩计划-| www.677077.com-福彩体彩是不是骗局| www.844872.com-陕西体彩排三| www.031302.com-福彩快三图标| www.112183.com-快三和值啥意思| www.182632.com-彩票是赌博-| www.263205.com-重庆时时彩开奖视频| www.339012.com-福彩双色球26选5| www.89862.cc-七彩彩票软件| www.063068.com-八号彩票下载安装| www.155044.com-竞彩今日单关| www.232900.com-好彩网是诈骗网站吗| www.945.me-福彩快三实战讲座| www.795787.com-廊坊鸿运彩票网| www.897330.com-欧洲百万彩票| www.964666.com-足彩360比分直播| www.yi.com-今日快三河北走势图| 中彩网www.71233s.com| www.223782.com-体彩app下载| www.129907.com-福彩图迷汇总牛材网| www.229159.com-广东好彩1开奖号码| www.324207.com-乐彩网是正规网站吗| www.911339.com-安徽彩票网-| www.761453.com-好彩妹照片-| www.cp806.cc-k彩-| www.123335.com-1088彩票网-| www.83sy.com-599彩票iso-| www.6237.top-3.6亿彩票-| www.319623.com-福彩三的和值表| www.391464.com-97299牛蛙彩票| www.493820.com-营口彩票站出兑信息| www.569872.com-福彩快三停售| www.634914.com-银川七彩艺校招生| www.700660.com-七星彩资讯-| www.778975.com-中国彩吧第一版| www.893701.com-安徽快三和值走势| www.345049.com-忆彩票下载-| www.512878.com-幸运快三好运快三| www.610468.com-排五最大中奖彩票| www.5703.vip-太子彩票网骗局| www.321321.com-体彩开奖号码查询器| www.387908.com-彩票平台跑路怎么办| www.488358.com-彩c81彩票-| www.557752.com-双色球彩牛材网字谜| www.619211.com-山东福彩中奖规则| www.681372.com-福利彩票是个坑| www.751875.com-澳门快5彩骗局| www.565393.com-3d彩吧第五版| www.009447.com-手机彩票网新彩吧| www.82773.com-足彩19041冷门| www.210352.com-极速快三下载| www.435039.com-什么是彩票开机号| www.707928.com-大发快三大神带回血| www.933008.com-快三多平台购买| www.2626.in-时时彩平台能改单吗| www.36654.com-澳门发行哪些彩票| www.889354.com-我要买双色球彩票| www.800496.com-不收费彩票qq群| www.1717.biz-注册彩金不限ip| www.71eh.com-信彩娱乐平台app| www.z09.com-大猿口算数彩票| www.92dj.com-购彩平台注册邀请码| www.3988.cn-东北结婚有彩礼吗| www.060076.com-网络快开彩网是什么| www.275797.com-彩票平台自己的彩种| www.671262.com-万彩动漫大师| www.42wv.com-福利彩票团队| www.033784.com-如意彩票网注册| www.321690.com-128彩票网-| www.463477.com-福利彩票图谜| www.920922.com-彩贝壳199-| www.129927.com-福彩055dcc-| www.202414.com-uu快3是什么彩票| www.69ph.com-老梁故事汇彩票| www.149855.com-038彩票平台苹果| www.262422.com-皇都彩票合法吗| www.356019.com-啥是玩彩-| www.306908.com-福利彩票今年几号买| www.96133.cc-体彩活动结束了吗| www.434637.com-xy773幸运彩票| www.542951.com-江苏福彩彩票双色球| www.101315.com-博彩票线路导航| www.919071.com-神州快三-| www.137870.com-江西彩票助手合法吗| www.242401.com-黑龙江大庆福彩快三| www.4010.biz-混合竞彩网计算器| www.216861.com-那个快三遗漏号码| www.399566.com-快三长牌-| www.349710.com-福彩和体彩一样吗| www.425346.com-中彩双色球媒体擂台| www.372627.com-网上购买体育彩票| www.029912.com-彩铅动漫古风女| www.361107.com-六洽彩-| www.271625.com-南粤风采好彩一生肖| www.005306.com-6762彩票app| www.771875.com-微信永盛时时彩| www.089986.com-彩乐汇app-| www.377132.com-时时彩平台推广| www.551178.com-现在不让合买彩票吗| www.657346.com-彩票306官方| 500万彩票www.96386l.com| www.342.biz-七星彩现场开奖| www.80310.com-石家庄体育彩票开奖| www.058854.com-全民足彩彩票电脑版| www.wf92.com-内蒙快三今日走势图| www.163013.com-好彩运大发快3| www.3295.win-彩色简笔画人物| www.751384.com-今日彩票图纸| www.835165.com-lol炫彩皮肤| www.928492.com-甘肃福利彩票种类| www.980294.com-我要购彩票-| www.490986.com-云鼎彩票线路| www.617882.com-开彩365app-| www.715573.com-彩票微助手怎关| www.796754.com-在淘宝买彩票怎么买| www.872009.com-彩票行家开奖直播| www.07qs.com-双色球彩谜-| www.94322.com-pc彩票-| www.107079.com-彩票作弊系统| www.27497.com-彩票作假最新事实| www.077654.com-新新彩票-| www.356006.com-漫威dc本子全彩| www.897916.com-福彩藏机图谜汇总| www.077755.com-87彩店店主手机版| www.184868.com-浙江福彩快彩助手| www.6277.cc-五福彩票真的吗| www.47833.com-快三人工计划群| www.377387.com-彩票对联-| www.549133.com-彩播直播app| www.625454.com-七乐彩十专家杀号| www.690422.com-澳客14场胜负彩| www.762576.com-幸运时时彩哪里的| www.871511.com-福彩双色球投注软件| www.ak87.com-快三图-| www.19kd.com-肥城新城路体彩站| www.185127.com-中国福彩一分快3| www.5738.tv-黑彩套钱-| www.018656.com-福彩彩吧图迷第一版| www.860080.com-577彩票注册中心| www.932094.com-有大发快三的平台| www.860402.com-体育彩票多久兑奖| www.960658.com-有彩金送的彩票网| www.hb55.cc-福彩3d吧百度贴吧| www.581696.com-爰彩乐官网-| www.11124.com-中华彩票公益时报| www.558749.com-c02彩票下载| www.98rw.com-盛彩网是黑彩吗| www.991628.com-福彩核对-| www.48ux.com-星彩无惨漫画桃花猫| www.1574.vip-文莱28彩票合法吗| www.36vj.com-703彩票登录网址| www.1172.in-福彩八仙过海组合| www.8833.bid-爱乐透彩票开奖结果| www.10pa.com-彩钢瓦漏水用什么胶| www.820089.com-玩彩赚钱是不是真的|