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.434755.com-贵州体彩范靖松| www.47918.com-甘肃体彩ll前三直| www.90439.com-彩票77苹果-| www.9205.vip-苹果手机体育彩票| www.4833.cn-世界杯哪里买彩票| www.ri30.com-爱彩乐江苏快3开奖| www.12sl.com-篮球外围彩票网站| www.90nf.com-欢乐中彩票-| www.675409.com-七乐彩好中奖吗| www.711696.com-时时彩后四万能码| www.180223.com-江苏快三一定牛预测| www.368994.com-彩票体彩大乐透| www.206505.com-90彩票平台登陆| www.979079.com-七乐彩基本走势表| www.ot36.com-江苏快三走势图定牛| www.678742.com-米兜彩票哪家公司| www.787565.com-360足球竟彩| www.649827.com-彩虹跑玩法-| www.744841.com-星光彩票是真的吗| www.816285.com-福彩昨天的中奖号码| www.893863.com-爱投彩票安卓| www.965621.com-香港福彩门户资料| 大赢家彩票www.799417.com| www.cai4844.com江苏快三计划| www.827928.com-乐猫彩票能提现吗| www.911630.com-彩票开奖日时间表| www.987677.com-多种网络购彩| www.dk55.com-大玩家彩票骗局| www.uf58.com-福利彩票中奖交税| www.11sw.com-彩票天下是骗局吗| www.819372.com-福彩360杀号定胆| www.905325.com-如何买足彩-| www.973893.com-中利彩票下载安装| www.cai4600.com河南快三预测一定牛| www.kk44.cc-易彩快三免费计划| www.89883.com-网易模拟彩票| www.557244.com-简单水彩-| www.774068.com-7星彩开奖结果| www.861572.com-今天3d彩报第三版| www.962091.com-贵州省彩票十一选五| www.cp6756.com-福彩快三官网下戴| www.vz61.com-玩大发快三怎样赢钱| www.630789.com-怎样才能中彩票大奖| www.520294.com-3d杀号定胆彩票| www.813784.com-能用微信支付的彩票| www.365174.cc-安徽福彩快3加奖| www.330908.com-大奖彩票网址是哪一| www.502283.com-多彩投本金可赎回么| www.581968.com-彩票999官方网站| www.974554.com-众彩平台app下载| www.02890.com-百乐门快三-| www.96rd.com-华为彩票提现不了| www.321.blue-趣彩彩票苹果手机版| www.810879.com-足彩18175期| www.907318.com-美国快三骗局| www.985388.com-今晚关小刀足彩推荐| www.bm69.com-彩61是骗局吗| www.vg76.com-江苏省苏州福彩网| www.238800.com-彩票网站诈骗手段| www.324669.com-华人彩票可信吗| www.420030.com-即开型彩票中奖编码| www.848678.com-时时彩计划方法| www.007752.com-澳客彩票官网下载| www.080206.com-满堂彩官方网| www.188179.com-福彩3d预测金码| www.23fm.com-36o竞彩比分直播| www.235397.com-广东福彩微信公众号| www.zk24.com-幸运跑马彩开奖结果| www.53fw.com-体彩500万税点| www.0708.wang-万博彩票是黑网吗| www.sz2.cc-中彩网北京快三| www.3mr.com-彩八彩票哪的平台了| www.86rt.cc-乐彩提现多久到账| www.2503.net-彩票开奖对比器| www.53999.cc-网络彩票怎么代理| www.217579.com-福彩自助彩票机代理| www.336014.com-足球竞彩玩法介绍| www.503180.com-彩虹播下载-| www.1974.vip-博彩跳槽送彩金| www.ax6.com-江苏快三的玩法| www.975071.com-七星彩规律图视屏| www.pp40.com-哈尔滨逸彩快三| www.75qd.com-财政部批准网络购彩| www.39485.com-70彩票用户注册| www.017611.com-易旺彩票网靠谱吗| www.853862.com-时时彩有赢钱的吗| www.379492.com-今晚彩票全部开奖| www.8346.biz-局王版七星彩| www.949291.com-福彩dd彩票-| 博友彩www.371m.cc| www.377333.com-男方分手要彩礼钱吗| www.503478.com-红彩app直播| www.344443.com-彩票交流群是真的吗| www.dr46.com-新浪数字彩票双色球| www.98tu.com-六爻测彩软件| www.4524.org-35福利彩票-| www.07388.com-快彩电子走势图下载| www.711776.com-时时彩高手投注技巧| www.782922.com-七乐彩500走势图| www.888012.cc-七星彩机选号码| www.999662.com-甘肃快三统计| www.510009.com-网易彩票客服中心| www.178.hk-上海体育彩票投注点| www.65956.cc-福利彩票随机号码| www.fm51.com-分分快三会造假吗| www.67ud.com-金多彩平台-| www.487795.com-好好彩网-| www.189040.com-内蒙快三平台| www.85835.cc-江苏快三彩500| www.05359.com-手机体育彩票app| www.722916.com-福彩各种玩法开奖| www.321954.com-下彩网网页版| www.2169.wang-福彩七码最大遗漏| www.65vb.com-完美国际彩票平台| www.0516.top-公益彩是什么| www.332951.com-广东十分彩走势图| www.403433.com-海南七星彩官方网站| www.503228.com-鸿彩灯光怎么样| www.559050.com-体彩11选5平台| www.610069.com-7星彩l-| www.672910.com-彩票开奖号出来| www.748995.com-彩虹101-| www.71607.com-福利彩票有快三吗| www.058183.com-昆明靓彩招聘| www.68wh.com-著名博彩公司| www.326422.com-七星彩领奖时间限制| www.496306.com-怎样看七星彩走势图| www.715422.com-福彩3d走势图正版| www.262731.com-温州体彩中心| www.062234.com-正规福彩快三平台| www.131345.com-彩礼3万寓意| www.660843.com-陕西十一选五彩票| www.719235.com-描写彩虹的好词| www.789106.com-足彩单关怎么玩| www.859876.com-网上的极速一分钟彩| www.915780.com-体彩机要折旧费吗| www.969621.com-在哪可以下欢乐彩| www.67et.com-体彩快乐二十分开奖| www.220267.com-炫乐彩票苹果版| www.6248.shop-佰万彩票破解方法| www.11015.com-福彩大发快3技巧| www.651270.com-创意水彩优秀作品| www.698400.com-彩票倍投的风险| www.107991.com-足球彩票排行榜| www.31895.com-唯彩看球老版下载| 吉利彩票www.80065f.com| www.pa24.com-极速虎彩票-| www.175599.com-三分快三破解器下载| www.355015.com-彩友资料-| www.dp74.com-今日彩票开奖查询| www.873037.com-大发彩票时时彩| www.947020.com-全天重庆彩计划红旗| www.994194.com-快彩电子走势图电视| www.cb79.com-彩票51官网-| www.uz71.com-福彩3d怎么组选| www.11gv.com-福彩三第字迷汇总| www.87gb.com-2345彩票网登录| www.026486.com-苹果app博彩下载| www.6832.in-36期彩吧彩报| www.656023.com-中国足彩胜平负| www.730761.com-足彩必发-| www.792931.com-专业彩票团队| www.855837.com-七乐彩复式金额表| www.899847.com-天天彩票软件下载|