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.335046.com-彩票天天彩选四| www.725848.com-必中彩票可以提现吗| www.865638.com-福彩3d报纸图| 网易彩票www.506791.com| www.pa11.com-快三秒盗窃| www.037.bid-体彩6十丨开奖号| www.273815.com-上海快三预测一定牛| www.210502.com-快三大平台-| www.325395.com-七星彩彩头尾预测| www.410187.com-胜负彩复式表| www.552806.com-1号彩票网下载| www.659739.com-600万彩票app| www.033509.com-七乐彩下载-| www.175658.com-安徽快三下载安装| www.942456.com-帮买彩票赚佣金的群| www.259221.com-竞彩庄家-| www.181851.com-福彩手机购彩app| www.326.tv-彩票圣经-| www.58975.cc-国民彩票登录平台| www.841728.com-鑫彩网―注册| www.954703.com-彩票开奖彩票123| www.dg9.com-如何玩快三-| www.sv91.com-准提咒彩票-| www.104518.com-彩票一直追号会中吗| www.638830.com-体育彩票开什么号码| www.764885.com-808彩票网册子| www.567661.com-体彩江苏11选五| www.029041.com-体彩个人申请| www.11cu.com-彩票3d走势图大全| www.576800.com-天天彩票银行卡解绑| www.689375.com-快乐彩票五平台| www.777132.com-网上购彩哪个最安全| www.863270.com-福利彩票今天晚上| www.926801.com-达人彩票注册邀请码| www.990473.com-内蒙快三n-| www.cn69.com-天天彩选四开奖查询| www.937901.com-云彩店下载-| 吉利彩票www.66376z.com| www.ih85.com-中国体彩竞彩网| www.968271.com-新浪足球胜负彩| www.515196.com-体育彩票结果| www.581731.com-正版资料一彩福网| www.026254.com-快三攻略-| www.099582.com-百盈互动彩票| www.305057.com-9b彩票投注站| www.318992.com-买彩票的醒醒吧老梁| www.mt.cc-彩票分析软件哪个好| www.959263.com-彩票中奖小说排行榜| www.go30.com-河北福利彩票快三| www.04vo.com-彩色铅笔画入门| www.138123.com-彩票怎么能中奖率| www.511249.com-雨后彩虹起网名| www.581386.com-中彩双色球彩票软件| www.654087.com-金龙彩票官方版下载| www.720650.com-快三大小单双赌博| www.791470.com-彩易博天誉高手论坛| www.863982.com-体彩黑龙江6加1| www.922331.com-约彩ios-| www.975645.com-未婚先孕彩礼怎么谈| www.fe7.cc-分分彩最聪明的玩法| www.342.mobi-入侵黑彩服务器技术| www.6080.la-釉上彩瓷器的要点| www.117908.com-彩福珠宝-| www.194664.com-彩票怎么玩快三| www.267078.com-海南福利快三查询| www.339306.com-深圳福彩中心领奖| www.414762.com-七彩蓝田投资怎么样| www.982350.com-四九彩票共享大全| www.41rg.com-七星彩画图软件| www.tg76.com-姜丽花式快三慢动作| www.go36.com-河南太康彩礼| www.250061.com-云彩在线彩票骗局| www.340505.com-福彩专家导航| www.49il.com-八彩鲜花加盟店| www.377913.com-体彩优秀站点| www.467837.com-马耳他国家彩票| www.559144.com-彩票走势图专家统计| www.639020.com-福建体育彩票申请| www.727355.com-易彩娱乐招商| www.792352.com-小军彩吧第一版| www.867842.com-七星彩奇葩号| www.937104.com-福田彩福大厦| www.986184.com-体彩排列三走势新浪| www.fu.com-甘肃彩票快3怎么买| www.mr22.com-彩播下载苹果版| www.578592.com-体彩店名称-| www.345173.com-棋牌彩票代理有罪吗| www.495229.com-玩网上博彩犯法吗| www.591709.com-sb博彩全称-| www.661604.com-足彩八串一中奖概率| www.mv74.com-快三正规吗-| www.283982.com-超级快三缩水软件| www.331900.com-鸿运彩票网官方地址| www.331458.com-七乐彩票是正规的吗| www.125143.com-彩票选号经典| www.4685.cm-一张彩票可以买几注| www.031244.com-迅盈彩票官网| www.204306.com-江苏快三走势跨度图| www.183593.com-河南快三开奖号| www.0171.top-色彩装饰画-| www.52796.cc-好彩彩票网-| www.930080.com-863人工彩票计划| www.y34.cc-高频彩票走势图大全| www.040813.com-博彩什么叫双重机会| www.55594.cc-福利彩票大小单双| www.863289.com-大智慧彩票-| www.cp27.com-快三三不同号计划| www.89ro.com-博彩app代理| www.005327.com-福利彩票几点封盘| www.75456.cc-双色球维彩视频| www.827588.com-彩民网网址平台| www.923882.com-骰子大小彩票软件| www.974860.com-香开码结果开奖彩娃| www.cp4766.com-湖北快三是真的吗| www.ld94.com-中彩彩票αpp| www.876044.com-彩世界苹果版| www.906774.com-亿博彩票-| www.983865.com-808彩彩票网站| www.ar45.com-网易购彩属于网易吗| www.579488.com-金祥彩票网登录| www.922229.cc-彩票365软件| 5号彩www.575hc.com| www.55764.com-七乐彩复式选号| www.99496.com-足彩310报纸官网| www.301520.com-快三单双大小怎么看| www.425568.com-彩票情侣生日选号器| www.523150.com-0818彩票平台| www.582673.com-易盈彩票邀请码| www.9916.cn-鸿鑫彩票是真的假的| www.299897.com-广西官方彩票客户端| www.793227.com-网上福彩双色球兑奖| www.8938.space-福彩新3d在哪买| www.912958.com-577彩票骗局记录| www.970834.com-高频彩票漏洞赚钱| 新盈彩www.xinyc8.com| www.im88.com-彩39-| www.826733.com-东润娱乐彩票| www.896257.com-玩彩官网-| www.955571.com-彩票中屠龙-| 大玩家彩票www.84499c.com| www.88784.com-k3彩票属于国家吗| www.125969.com-卖彩票赚钱吗| www.203652.com-福彩5d是每天开| www.265602.com-福彩l5选5-| www.8988.bid-彩票黑蝴蝶-| www.232228.com-福利彩票玩法规则| www.593393.com-北京七彩汇国际会所| www.696090.com-彩票软件刷流量| www.545917.com-福彩投注站申请电话| www.65uy.com-保定体彩电话投注| www.515652.com-可以跟着买的彩票| www.605266.com-大有彩票注册网址| www.722886.com-大钱庄彩票-| www.862100.com-辽宁福彩12选5| www.964038.com-福彩和尾-| www.cp3696.com-百盈快三怎么看| www.866722.com-极速时彩开奖直播| www.949778.com-百宝彩视免费账号| 大赢家彩票网www.050955.com| www.gj56.com-福彩有一分快三吗| www.181183.com-快三奖金设置图表| www.260395.com-彩票属于赌博嘛| www.924011.com-大乐彩首页-| www.964799.com-浙江31体彩-|