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天

知道了
1分快三 中国福利彩票www.33588b.com| www.6965.me-融彩网多长时间了| www.0493.xyz-双彩论坛3d双彩图| www.87bf.com-时时彩代-| www.316976.com-体彩中奖者-| www.544212.com-福彩第2版-| www.695967.com-彩票复式计算器| www.836633.com-九州彩票是合法的吗| www.970899.com-迷彩兔看看-| www.365263.cc-d9彩彩票-| www.630269.com-55215彩吧图| www.00985.com-精英彩票高手| www.50077.cc-足彩网胜负彩| www.059377.com-快三豹子规律河北| www.282530.com-彩票止损方法| www.388092.com-体彩店销售网点查询| www.598293.com-七星彩19038| www.xe47.com-福彩3d走试图| www.700041.com-五分时时彩计划人工| www.622820.com-大发快三就计算公式| www.856644.com-七星彩开结果| www.970955.com-腾讯彩票购彩平台| www.ql47.com-彩经网双色球走势图| www.6616.pw-青蛙开彩-| www.45500.cc-有什么彩票可以刷水| www.028524.com-友成彩票-| www.133774.com-好彩高手论公式| www.395708.com-体育彩票赔率怎么算| www.577532.com-上海快三能赚钱吗| www.698234.com-温州体彩官网首页| www.725.com-时时彩包胆怎么选号| www.8712.cn-彩之星是真的假的| www.023536.com-福彩六码最大遗漏| www.66344.com-马来西亚博彩诈骗案| www.066853.com-香港博彩税-| www.542310.com-福彩返点-| www.811875.com-新昌县彩烟乡下宅| www.i62.bid-彩乐网福中网资料| www.9466.vip-体彩61开奖结果| www.150595.com-腾讯分分彩规则| www.511285.com-关于彩虹的微信名| www.725709.com-中国福利彩票王素英| www.061989.com-彩票网站钱提不出来| www.79987.cc-千亿彩票五-| www.124467.com-攻破彩票-| www.265973.com-安徽快三三不同号| www.772355.com-智彩走势图app| www.622858.com-体彩有多假-| www.866899.com-全天彩托骗局| www.974315.com-五福彩分分时时彩| www.lu26.com-彩票有一分快三吗| www.311535.com-云南有快三吗| www.127428.com-日彩网是骗局吗| www.561535.com-福彩缩水过滤工具| www.964070.com-胜负彩19043期| www.nc32.com-上海快三计划网址| www.8157.top-今天可以买彩票吗| www.027935.com-c彩36-| www.428211.com-369足彩缩水软件| www.995601.com-8k彩票易彩快3| www.35388.com-中国福彩真的假的| www.332765.com-京彩集团软件下载| www.779653.com-135彩票官网| www.3059.pw-中国体彩网址| www.89zw.com-返还率小的博彩公司| www.zc12.cc-买快三彩票是赌博吗| www.iw34.com-360足彩-| www.52192.cc-爱乐彩十一选五云南| www.125345.com-乐米彩票软件| www.994870.com-中福快三输死人了| www.aq00.com-重庆体彩-| www.08on.com-登录大众彩票| www.2621.cc-彩票37-| www.57230.com-彩宝宝ios-| www.100928.com-体彩三天必出计划| www.245300.cc-易彩快三高手计划| www.371265.com-彩票快3手机下载| www.539727.com-手机购买彩票可靠吗| www.06ho.com-爱好48色彩铅色卡| www.1188.live-中彩神倍投计算器| www.55191.cc-时时彩和值确定| www.048818.com-玩彩老头-| www.pn54.com-福彩3d和值尾走势| www.361.date-cp55彩票官网| www.9311.cn-超级福彩七乐彩| www.026302.com-三d彩票选号技巧| www.233448.com-北京pk拾彩票平台| www.428981.com-吴中区体彩中心电话| www.730749.com-足彩胜负14场比分| www.009156.com-彩票会员123| www.155843.com-辉煌彩票注册网址| www.666252.com-万达彩票台子| www.90508.com-成都口袋彩店二维码| www.119300.com-发彩网怎么样| www.201715.cc-押大小单双正规彩票| www.726079.com-手机购彩怎么样| www.582696.com-绝望买彩票中奖| www.yu36.com-美国彩票销售额| www.8745.biz-腾讯分彩软件下载| www.358437.com-福彩欢乐生肖开奖| www.619757.com-贺平贺文彩票| www.00471.com-彩票中奖故事双色球| www.98633.cc-快三选号号-| www.200799.com-体彩扑克3开奖| 500彩票www.50064p.com| www.008384.com-16日体彩-| www.52482.cc-快三是不是合法的| www.929678.com-86人工彩票计划网| www.02sa.com-澳门惠民彩资科| www.3967.bid-体彩61中奖规则| www.101461.com-九号彩票手机登录| www.69457.com-八马彩票app破解| www.586573.com-千里马体彩预测| www.679827.com-今日内蒙快三走势图| www.166707.com-福彩快三技巧| www.377109.com-8k彩票易彩乐辅助| www.514242.com-xs原彩显示-| www.088827.com-快速赚钱的方法彩票| www.75vm.com-重庆时时l彩下载| www.9961.cn-中国体彩报排列3| www.117767.com-今日竞彩新浪爱彩| www.676516.com-体彩开奖-百度| www.689267.com-晓艳七乐彩预测| www.31562.cc-风凰竞彩-| www.88229.cc-彩民网是什么| www.081905.com-老师带快三-| www.158254.com-北京福彩pk赛车| www.246930.cc-吉祥彩票官方版| www.315910.com-体彩何时开通竞彩| www.398062.com-天恒彩票靠谱吗| www.od03.com-彩神密聊群-| www.437738.com-足彩中的专业术语| www.76vd.com-东莞福彩印刷| www.7930.vip-首页彩票人工计划| www.36667.cc-今晚澳门彩报1| www.303256.com-鑫彩彩票平台合法吗| www.gn15.com-河南彩色沥青| www.976978.com-中彩票软件官网下载| www.7405.cc-色彩风景写生| www.56394.com-河北体彩管理中心| www.060038.com-上海天天彩选4玩法| www.505424.com-江苏老快三开奖| www.73459.com-大众彩票app安卓| www.45ra.com-盛大彩票正规吗| www.335368.com-双色彩票一注守号| www.579569.com-送钱的彩票软件| www.26594.com-七星彩彩票看不懂| www.30bc.com-昨天的福彩中奖号码| www.131668.com-郑州彩票双机店| www.24ym.com-华彩在线是啥| www.107163.com-黑客买彩-| www.313736.com-竞彩网首页电脑版| www.34ec.com-怎么搭建彩票网| www.xt81.com-彩虹六号国服凉了| www.627423.com-彩678app中心| www.375121.com-体彩18138期| www.91jx.com-万福彩票下载| www.9120.cn-663299彩霸王| www.41868.com-中华彩吧的网站| www.78199.cc-福彩选号方法与技巧| www.019343.com-贵州中彩票中奖| www.55989.cc-购彩助手能不能玩| www.582170.com-彩879彩票app| www.26lr.com-快三一般计算公式|