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.852555.com-体彩3l选7开| www.909896.com-乐彩快三是不是骗局| www.244368.com-体彩排三推荐号| www.769101.com-3d彩票布衣天下图| www.951195.com-福体彩票全部开奖| www.cp022.com-彩票投注-| www.qp35.cc-分分快三合法不| www.22uz.com-富强彩票有没有猫腻| www.7zy.com-老板给员工发彩票| www.187666.com-河北快三技巧规律| www.29tr.com-采摘牛彩-| www.320340.com-苏快三开奖-| www.743535.com-怎么购彩-| www.914648.com-快三和值倍率| www.804.me-新浪彩票双色球频道| www.39857.cc-苹果手机怎么下彩八| www.947196.com-二分彩开奖-| www.193672.com-中信彩票平台| www.61ci.com-完美彩票723| www.4972.cc-中澳彩票网-| www.56160.cc-环彩彩票官网ios| www.651373.com-北京速开彩官网| www.890340.com-彩65-| 天下彩www.www.340680.com| www.fc47.com-玩彩赚钱技巧| www.08fi.com-浙江体彩大乐透规则| www.4575.cc-顶尖的彩票网站系统| www.756461.com-福彩3d实票详情| www.870132.com-天天爱彩票官网下载| www.992.red-即开型福利彩票机器| www.175999.com-快三彩票破解软件| www.246964.com-360体彩网-| www.315070.com-上海体彩在哪里领奖| www.912891.com-万彩网快三合法吗| www.jt1.cc-河南快三数据| www.291519.com-内蒙快三综合| www.385383.com-梁宏达说彩票股票| www.493005.com-江宁区众彩物流搬迁| www.591837.com-海尔彩晶王子| www.369230.com-3旳乐彩网-| www.476887.com-国彩彩票网址| www.559750.com-彩宝彩票网站靠谱吗| www.947245.com-中国彩吧软件下载| 中国福利彩票www.34788n.com| www.3653.top-手机买彩软件| www.882501.com-国家正规的高频彩票| www.965123.com-彩票江苏快三是撒| www.pn26.com-福彩双色球手机购买| www.2xu.cc-彩票平台会黑钱吗| www.74mv.com-福彩3d之家杀码| www.670122.com-海南彩票七星彩论坛| www.773687.com-时时彩摇奖机下载| www.930658.com-彩票扣税标准| www.981844.com-577彩票网平台| www.1077.org-高手网天空彩票| www.e52.org-七星彩牛嗲头尾资料| www.31293.com-鄂尔多斯福彩网| www.0302.loan-福彩店会卖假彩票吗| www.n49.org-怎样看彩票-| www.91cl.com-997171神彩网| www.3656.in-下载o38彩票| www.9299.site-彩票公式精算师破解| www.546207.com-利用分分彩刷流水| www.903616.com-九龙福彩是不是骗| www.974576.com-众彩彩票真假| www.707739.com-足球胜负彩即时比分| www.32552.com-彩票长期守号有用吗| www.zm01.com-大发彩票正规吗| www.75la.com-彩票怎样投注| www.569969.com-手机游戏七彩捞腌菜| www.351.live-我爱中彩票网官网| www.571144.com-青蛙彩网站-| www.654773.com-福彩跑马规则| www.727101.com-彩乐-| www.803650.com-高频彩背后黑幕众多| www.875111.com-258竞彩足球官方| www.938274.com-彩票投注站会改革吗| www.992623.com-喜乐彩网址-| www.bc05.com-周易测快三-| www.st32.com-七星彩中奖4个号| www.9wa.cc-关于彩票微博| www.977495.com-彩妆店赚钱吗| www.cp6653.com-福彩安徽快三玩法| www.414529.com-彩之云是什么可靠吗| www.526203.com-竞彩绝招-| www.589422.com-七星彩韩雨轩| www.655216.com-海南七星彩开奖直| www.720978.com-天码马彩票-| www.791949.com-附近彩票站电话| www.866163.com-易迅彩票app| www.922315.com-易约约彩合不合法| www.984163.com-43cc看彩结果| www.xi14.com-江苏快三走-| www.74se.cc-甘肃快三是24小时| www.69658.cc-时时彩一条龙| www.007388.com-福彩的开奖结果| www.652218.com-福彩大乐透走势图| www.4679.biz-彩票其他流水方法| www.198753.com-福利彩票3d字谜| www.447923.com-双色球经典说彩| www.608866.com-网络彩票停售原因| www.797731.com-新彩吧中国彩吧| www.920027.com-福彩三分彩-| 火星彩票www.hx6627.com| www.071132.com-足彩高手微信群| www.644970.com-35彩票网址-| www.762525.com-北京福彩官网快3| www.950837.com-山东齐鲁福利彩票网| www.16wv.com-新宝彩票娱乐| www.1203.org-彩票几个数字算一注| www.657106.com-彩票坊平台下载| www.33pf.com-福采彩3d基础知识| www.55564.cc-英国五星彩-| www.698489.com-嘉兴福利彩票| www.836650.com-vv500彩票快3| www.330638.com-掌上购彩是不是骗局| www.907227.com-河内1分彩开奖结果| 网易彩票www.26163w.com| www.78.gg-滴滴彩票安卓版| www.433535.com-中国体育彩票排列| www.874546.com-中国山西福彩网| www.864625.com-网上黑彩报警有用吗| www.947985.com-四川体育彩票七位数| www.pe7.com-派彩网-| www.089186.com-彩6彩票官网| www.11757.com-瑞彩彩票打不开了| www.69577.cc-彩民彩票免费大全| www.58oj.com-法院查封彩票站| www.2387.space-新西兰彩票种类| www.15977.com-竞彩中奖计算器| www.4034.biz-炫彩艺术-| www.800370.com-必中彩票客户端| www.56265.com-江苏快三官方计划网| www.112651.com-七星彩查询开奖| www.40tx.com-体育七星彩的开奖| www.689844.com-凤凰微彩官网| www.0245.la-时时彩计划在线| www.47wx.com-开个彩票店要多少钱| www.017162.com-快三固定图-| www.3752.wang-安徽快三彩网| www.659635.com-炒菜彩票中奖查询| www.803704.com-吉林快三单双走势图| www.926209.com-福彩500资讯| www.986253.com-最好的彩票平台大全| www.kc9.com-江苏体彩网11选五| www.ol00.com-体彩大乐透前一后一| www.3qq.com-京彩软件下载| www.61hb.com-体彩3d中奖号今天| www.0397.cc-足彩购买平台| www.4683.biz-七星彩预测乐彩网| www.7747.top-足彩几串几对照表| www.468671.com-08年福利彩票中奖| www.2974.biz-56幸运彩票-| www.03299.com-六合49彩-| www.637678.com-七星彩排列五资料| www.9lb.com-七星彩6等奖多少钱| www.85fs.com-微信中彩网-| www.979804.com-二元彩票网走势图| www.yq2.cc-福利彩票3d试机号| www.tg05.com-k彩登录福地| www.9fx.com-体彩四等奖有多少钱| www.50gf.com-足彩爱美人微薄| www.042.date-彩票止损止盈| www.582390.com-鸿运彩票是官网吗|