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.5165.biz-亚洲杯足彩购买| www.63667.com-足彩狼人-| www.854481.com-一分快三太假了| www.93hd.com-动物彩色画-| www.23239.com-gc国彩是骗局揭秘| www.879243.com-彩票几位数算中奖| www.963727.com-福利彩票代理赚钱不| 冠赢彩票www.526650.com| www.853529.com-天津好彩打印官网| www.pf39.com-河北快三套选新玩法| www.140417.com-合法的彩票网站| www.384747.com-足彩稳胆是什么意思| www.cv63.com-私彩如何挂钩官网| www.856398.com-彩票反买是什么意思| www.941287.com-彩票刷流水是什么罪| www.994900.com-好彩堂四肖中特| www.87tw.com-澳博彩票骗局| www.u56.net-新彩吧3d-| www.303459.com-好彩3玩法技巧| www.501875.com-最大的彩票中奖| www.581369.com-2元的彩票几位数字| www.708181.com-彩神x是真还是假| www.803339.com-电视剧《五彩戏娃》| www.921749.com-乐8彩网站-| www.985995.com-福彩站怎么样| www.507089.com-亿彩堂iosapp| www.593565.com-七彩染料-| www.673330.com-玩彩票怎么看走势| www.786070.com-8848彩票app| www.870233.com-惠民彩票下载安装| www.997783.com-排三走势乐彩网| www.bc31.cc-快三官网开奖| www.vu60.com-彩票k线解析| www.307299.com-爱彩乐算什么彩票| www.408889.com-体彩票中奖-| www.540080.com-手机端下载彩乐汇| www.778373.com-福彩游戏机连环夺宝| www.917256.com-88彩票赌博-| 鑫亿彩www.197093.com| www.qz54.com-腾讯时时彩正规吗| www.24po.com-手机彩膜怎么揭下来| www.71399.cc-体彩19027期| www.110327.com-福彩双色球走势预测| www.300600.com-彩票彩金-| www.392502.com-彩铅画明星人物图片| www.260.net-噢百万彩票49选7| www.757888.cc-竞彩宝官网-| www.6863.cc-体彩舟山飞鱼直播| www.5577.com-28期七乐彩-| www.898898.cc-广东体育彩票11| www.949683.com-福彩三d奖-| www.08je.com-彩铅画苹果图片| www.723508.com-体彩亿元大奖| www.818796.com-体彩14场-| www.jf8.com-密聊彩票-| www.tv49.com-类似彩名堂app| www.449.in-乐彩网是真的假的| www.2085.vip-江苏体彩19034| www.329028.com-首存1元送58彩金| www.401403.com-中国福彩3d进宝图| www.8749.biz-七星彩梦码书| www.7262.com-小鸡彩虹里面的歌曲| www.008499.com-福利彩票晚上那个台| www.410091.com-彩票新浪彩票网| www.vz19.com-人人中彩票还能用吗| www.08hl.com-七星彩txt微盘| www.860774.com-这期福彩中奖号码| www.45994.com-亿米彩是正规公司吗| www.5467.top-彩票销售点的利润率| www.69ff.com-快三大小公式| www.6270.vip-河北保定快三今天| www.309862.com-体彩五规则-| www.498131.com-易网彩票走势图下载| www.608048.com-河北体彩排列五开奖| www.689069.com-山东福利彩票沙龙| www.771139.com-全天最准时时彩计划| www.845656.com-369中国福利彩票| 吉利彩票www.80065j.com| www.045587.com-彩票代理按天反佣金| www.72133.cc-富彩彩票怎么做代理| www.200853.com-昨天体彩开奖结果| www.016116.com-唯彩会预测专家杀号| www.368168.com-彩铅画樱桃图片| www.543177.com-骰子快三走势图| www.910856.com-彩票土豪养成计划图| www.312811.com-鑫彩晨led显示屏| www.532338.com-彩之王首页| www.113262.com-彩票秘籍书全套| www.yb87.com-贵州福彩大奖无人领| www.tm13.com-福彩申请电话| www.ni2.com-200万彩票app| www.287230.com-彩票代理佣金| www.367002.com-彼岸花彩铅画高清| www.097346.com-体育彩票竞彩足球| www.355894.com-80彩票网址-| www.456853.com-彩票刷单-| www.576418.com-七彩官方网站| www.633580.com-七乐彩官方-| www.87we.com-黑彩支付宝充值漏洞| www.3439.cm-网易红彩专家预测| www.906665.com-山东体彩扑克3查询| www.193499.com-体彩排列3中奖玩法| www.814411.com-福利彩票双色球开二| www.876090.com-福彩3d天下无敌1| www.949260.com-体育彩票经营理念| www.997240.com-体彩期3d开奖号码| www.ee20.com-体彩中心快三| www.206226.com-快三走势讲解| www.365658.cc-中国体彩手机在线| www.292759.com-福彩3d号码杀码| www.391976.com-如何玩好快三大小| www.654127.com-聚聚彩下载-| www.764730.com-33彩票安卓版| www.109081.com-网络彩票赌博害死人| www.83155.cc-彩票倍数怎么算的| www.054548.com-乐赢彩票app下载| www.133259.com-成都彩钢板批发价格| www.197641.com-福彩快三河北开奖| www.254542.com-8k彩票app下载| www.346189.com-李彩桦单身部落| www.576018.com-官方福彩3d图表| www.635171.com-七彩音符快乐颂下载| www.697087.com-安卓系统足球彩票| www.989796.com-购彩8816-| www.7584.cm-大通彩票网页手机版| www.022189.com-体彩六加一开奖号码| www.941133.com-中国体彩票图片| www.309952.com-江苏省体彩兑奖地址| www.90351.com-机选买彩票能中奖吗| www.5042.org-世界杯怎么买足彩| www.33101.cc-快三玩法秘籍大全| www.533492.com-500彩票网试玩| www.027159.com-078彩票官网| www.711806.com-时时彩必赢投注法| www.805936.com-彩吧四版-| www.877001.com-福彩六码最大遗漏| www.940206.com-黑彩怎么赢钱| www.989505.com-查彩票的软件有什么| www.wp3.cc-彩界毒王-| www.989135.com-这个体育彩票app| www.yw80.com-六彩论坛-| www.484477.com-人人中彩票刑拘| www.626112.com-十分时时彩怎么下载| 幸运彩票www.852699.com| www.y23.club-体彩排列三遗漏数据| www.tl75.com-淘彩票大发快3| www.86se.cc-彩票官网app下载| www.7758.vip-体育彩票北海中奖| www.935169.com-优彩网彩票靠谱吗| www.984798.com-足彩胜负奖金计算器| www.ve.com-河北快三正文一定牛| www.25qp.com-迷彩图片手机壁纸| www.92kt.com-彩票买50注的人| www.1558.pw-99999彩票-| www.40318.com-彩票破了可以兑奖| www.333.cx-有攻击黑彩网黑客吗| www.935998.com-大发福彩官网| www.984608.com-彩虹8彩票是正规吗| www.dx98.com-共赢彩票娱乐平台| www.yt86.com-今日湖北快三推荐| www.24fo.com-手机膜有彩色| www.009253.com-凤彩网登录-| www.993040.com-足彩贴吧-| www.bp88.com-七乐彩哪年开始的|