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天

知道了
彩01彩票 www.028813.com-合肥福彩发行中心| www.e00.cc-58彩票计划-| www.557925.com-海南四码彩票知识| www.659718.com-我中啦彩票网双色球| www.757846.com-佰胜彩票-| www.828427.com-喝彩的解释-| www.902352.com-彩票店做黑彩挣钱吗| www.964672.com-足球彩票新浪网| 吉利彩票www.80075s.com| www.631581.com-好彩三八是什么动物| www.710426.com-网上黑彩彩托套路| www.793633.com-c48彩票下载安装| www.868312.com-快三计划骗局| www.cp9737.com-快三计划追号盈利表| www.mx16.com-中彩网怎么注册| www.735762.com-福彩3d高概率秘籍| www.qu03.com-于海彩票案后续| www.44wv.com-uc彩票技巧-| www.060937.com-彩乐网4343us| www.962917.com-彩圣字谜汇总| www.me2.com-吉林省体彩中心地址| www.tv53.com-彩票合买平台推荐| www.28bz.com-私彩平台改单| www.329585.com-彩票平台网站维护| www.18oj.com-什么的彩云填空词语| www.688710.com-老谢说彩准不准| www.822197.com-爱博彩票67768| www.908737.com-湖南福彩中心地图| www.976812.com-福彩双色球泰安中奖| www.hc.cc-安徽快三分析预测| www.ms74.com-内蒙古福彩网| www.u11.com-深圳体彩中心兑奖| www.255190.com-68彩票软件下载| www.375276.com-中国彩宝品牌加盟| www.918850.com-如何网上举报私彩| 三星娱乐www.sxyl9.com| www.fu03.com-彩票交流群-| www.k80.online-重庆时时彩个人平台| www.70fs.com-红菜苔彩票骗局| www.2096.org-苏宁彩票合法吗| www.380198.com-国外大优彩票软件| www.59yj.com-邯郸体彩中心在哪| www.926724.com-达人彩票娱乐| www.987530.com-505彩票计划网| www.zn1.com-河北省快三遗漏提示| www.nq05.com-选号器下载快三广西| www.048738.com-精英彩票资料大全| www.039369.com-华彩彩票是怎么事| www.991480.com-彩民之家首页| www.io97.com-五百彩票网官网| www.2bk.com-买彩票可以中多少钱| www.637839.com-鑫彩网彩票app| www.726853.com-正规彩票苹果版| www.817353.com-福彩机器多少钱| www.883524.com-福利彩票高频彩计划| www.960954.com-大乐彩票走势图表| 大玩家彩票www.84499r.com| www.ft49.com-福彩7+2多少钱| www.737378.com-2019彩图库彩图| www.823982.com-足彩3串1的概率| www.87ts.com-十分快三软件| www.970499.com-彩票漏洞吧-| www.cc9.com-36先7好彩3结果| www.or57.com-中国体育彩票双色球| www.3hf.com-京彩计划软件| www.zl04.com-933彩票-| www.935.cn-梦书解梦七星彩打架| www.ce27.com-有人买快三亏钱吗| www.790041.com-青海省中国福利彩票| www.952351.com-购彩平台代理违法吗| www.hv39.com-快中彩开奖号码| www.554484.com-七星彩超级组合| www.698128.com-极速时时彩技巧稳赚| www.814563.com-彩票下载送10元| www.910718.com-中国足彩网官方首页| www.990639.com-江苏省体育彩票官网| www.ds54.com-时时彩是不是骗局| www.a24.online-彩票中了5元怎么领| www.682579.com-买足彩输到倾家荡产| www.782653.com-乐和彩票网官方端口| www.868318.com-亿彩有多少人亏钱| www.946132.com-彩九c9com平台| 500彩票www.26299r.com| www.444171.com-彩31贴吧-| www.927282.com-福利彩票几个数字| www.983262.com-808七星彩网站| www.cp9255.com-中中彩票下载| www.6630.net-香港红财神报彩图| www.22582.com-九州彩票下载| www.63892.cc-胜负彩大奖-| www.839285.com-腾讯五分彩最稳计划| www.1ws.com-彩色铅笔蝴蝶| www.070398.com-江西彩礼多少| www.736968.com-海沧福利彩票网点| www.880281.com-新浪彩票网电脑版| www.48cf.cc-泰国彩票官网| www.29228.com-广东没有网售彩票的| www.693383.com-最稳的大发快三计划| www.99ru.com-彩世界时时彩下载| www.26992.cc-新彩票易彩快3| www.682130.com-足彩19047-| www.21by.com-时时彩最快开奖接口| www.3593.biz-福彩都有七乐彩| www.838406.com-贵州快三一共多少期| www.236996.com-浙江体彩中心| www.550892.com-恒大彩票是什么意思| www.1465.vip-简单彩铅画古风女孩| www.603323.com-怎么买彩票世界杯| www.672396.com-江苏快三怎么玩独胆| www.788285.com-彩票365首页| www.868477.com-01彩票官网网址| www.960502.com-排列三的彩票元网| www.fi13.com-菲律宾正规彩票平台| www.a55.vip-重庆时时彩玩法心得| www.586221.com-七乐彩最准预测| www.785816.com-怎么注册领航彩票| www.4909.top-500c0m彩票网| www.198787.com-大发时时彩规律| www.271301.com-丰彩彩票能中奖吗| www.356005.com-豪彩彩票娱乐注册| www.446770.com-彩优微电子怎么样| www.182501.com-河北彩票快3开奖| www.454473.com-多盈福彩-| www.377886.com-幸福彩手机报下载| www.490012.com-彩票扫描识别中奖| www.566354.com-宏发彩票信誉平台| www.2432.in-新年好彩头什么意思| www.0933.bid-苏州竞猜快三查询| www.178207.com-安徽省福彩中心| www.256212.com-福彩手机自助购彩| www.253011.com-广东好彩3选码技巧| www.367386.com-星期三开什么彩票奖| www.1987.org-cp.12彩票-| www.063186.com-福彩机子可以退吗| www.185256.com-分分快三是官方的吗| www.307028.com-时时彩快开-| www.8554.org-湖北体彩中奖查询| www.53624.com-正彩这个牌子怎么样| www.024603.com-彩神通内部四码代理| www.bs89.com-彩票资料大全| www.026504.com-电竞博彩下载| www.087091.com-中国福彩网手机版| www.588489.com-大众彩体彩走势图| www.91114.cc-软包好彩多少钱| www.96244.com-1992年彩票-| www.088409.com-黑龙江体彩官方网站| www.552786.com-山东体彩中心位置| www.45393.com-2019彩票新闻| www.14294.com-七星彩一等奖概率| www.562887.com-二八彩app下载| www.658455.com-聚宝彩票怎么赚钱| www.751027.com-对彩票上瘾怎么办| www.822775.com-福彩3d家彩开机号| www.891582.com-彩票大数据软件| www.954230.com-709彩票旧版| www.995888.com-足彩十四比分| www.ip70.com-体育彩票22选五| www.365457.cc-如何控制大发快三| www.552471.com-速彩网app-| www.55lq.com-中国投彩网-| www.936093.com-速8彩票真假| www.947801.com-彩吧论坛字谜汇总| www.ry09.com-qq快三开奖结果| www.57335.cc-七星彩大赢家|