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.156227.com-kg彩票骗局大揭秘| www.4639.biz-旺旺彩票可信吗| www.814804.com-吉林快三大小微信群| www.947936.com-正规的购彩平台| 幸运彩票www.983699.com| www.14qg.com-欢乐彩票软件| www.442678.com-足彩蓬蓬-| www.686777.com-中彩那天阅读答案| www.818864.com-北京福彩投诉电话| www.9992.vip-万彩国际招人吗| www.910650.com-布衣天下彩吧288| www.028452.com-彩票快三入门| www.117922.com-分分彩怎么杀跨度| www.039371.com-牛牛彩票app下载| www.748027.com-好彩葡萄爆珠| www.828138.cc-胜负彩一等奖怎么领| www.907909.com-海南七星彩包码怎么| www.971823.com-博彩庄家对冲| www.jq2.cc-今日河南快三预测| www.pd67.com-河北福彩排七走势图| www.65004.com-盈彩国际app下载| www.557216.com-3d彩票网彩手机版| www.30794.com-彩票66网是不是| www.772594.com-彩68彩票app| www.903411.com-高频彩计划公式赚钱| www.it27.com-竞彩网比分直播| www.2831.bid-重庆时时彩走势牛牛| www.14981.com-彩票联盟下载手机版| www.m15.vip-中彩网东方6+1| www.wt63.com-中国彩吧网站| www.7268.top-彩虹六号妖怪冲击波| www.32008.com-体彩佣金转额度| www.gr29.com-好彩1预侧-| www.015614.com-彩票密码解密排五| www.098860.com-百福彩平台-| www.133362.com-单层彩钢瓦围挡| www.777925.com-牛彩图迷-| www.172962.com-甘肃快三开奖号码是| www.999992.com-中国福彩排五| www.7488.wang-体育彩票开什么号码| www.401236.com-买足球竞彩靠谱不| www.563157.com-彩票查询软件官网| www.673502.com-快三和值跨度| www.783798.com-网售彩票怎么举报| www.904776.com-有声小说买彩票| www.998844.com-香港快三开奖时间| www.kf71.com-360彩票计算器| www.850395.com-足彩3串3什么意思| www.931262.com-大吉彩票真黑| 福彩网www.60007f.com| www.gw25.com-体彩直播-| www.668858.cc-华人彩票是真的吗| www.773890.com-中彩可靠吗-| www.859775.com-彩民交流-| www.931782.com-买彩票念什么咒语| www.986896.com-各种彩票开奖号码| www.ee3.com-中彩网app下载| www.mm95.com-正规的网络彩票平台| www.234496.com-山东彩友沙龙双色球| 网易彩票www.506739.com| www.03rw.com-购彩iv安全不| www.165211.com-掌中彩可以提现吗| www.745011.com-非法经营彩票判决| www.nq17.com-福彩3d选号器| www.19fo.com-七星彩数据qq群| www.432.me-福彩信息发布| www.225886.com-9彩-| www.0959.com-跟单买彩票-| www.37622.com-正彩彩票下载| www.621503.com-彩神vi5快三| www.371886.com-牛彩靠谱吗-| www.116071.com-手机上玩哪种彩票好| www.h87.cn-福彩3d投注攻略| www.759303.com-必发彩票app| www.852234.com-彩票七位数中奖规则| www.920537.com-彩争霸8下载| www.972908.com-日彩网是骗局吗| 500彩票www.330687.com| www.961841.com-四川竞彩快三| www.cp8119.com-易彩堂官方平台| www.653528.com-彩票徐州有多少中奖| www.580619.com-福彩大小走势图| www.954583.com-没有彩票的国家| 吉利彩票www.80075g.com| www.vb04.com-河南快三计划| www.11xp.com-体育彩票多久能注销| www.798568.com-广西体彩电话| www.867695.com-今曰开什么七星彩| www.949848.com-派彩北京快三| www.994980.com-篮球比分新浪爱彩| www.aj54.com-易彩是正规平台吗| www.pv03.com-98彩票犯法吗| www.33kt.com-牛材网彩票图谜汇总| www.1173.press-五分快三是什么意思| www.575167.com-360彩票倍投器| www.813844.com-福彩刮刮乐中金条| www.646360.com-彩票稳定打法| www.6034.biz-奇门测彩票用神| www.35329.cc-江苏快三微信群跟买| www.406604.com-七星彩五行图| www.331212.com-吉林快三中奖金额| www.392276.com-体彩排列三中奖金额| www.607198.com-彩票3d试机号| www.39650.com-下载一个天天中彩| www.000263.com-cp彩票头条-| www.897506.com-九彩彩票是正规的吗| www.715177.com-彩票站转让合同| www.15360.com-桐乡福彩中心| www.933132.com-彩乐乐一彩票工具| www.647631.com-97彩票苹果版| www.l68.top-电脑彩票走势图软件| www.ki.cc-北京快三官网下载| www.14eq.com-福利彩票3d广播台| www.834485.com-彩烟烟花多少钱| www.946831.com-彩钢围档-| www.cp086.com-喜乐彩开奖号码| www.1cb.cc-天福彩票注册地址| www.446112.com-68彩票网是什么| www.552400.cc-心悦彩票-| www.626948.com-nba体彩购买技巧| www.709237.com-网上彩票诈骗案| www.781319.com-鼓励买彩票的句子| www.327878.com-网易福彩开奖直播| www.t09.net-彩票中奖一亿| www.sz3.cc-重庆时时彩手机下注| www.ru03.com-彩票规律破解公式| www.172222.cc-江西福彩快3推荐| www.gq45.com-易彩快三开奖结果| www.99qp.com-怎么研究体彩| www.067004.com-亚洲彩票十大平台| www.133463.com-广酉福彩选号助手| www.201540.com-分分快三预测网| www.013951.com-快三玩法表格| www.936328.com-凤凰时时彩平台官网| www.011587.com-福利彩票全天彩| www.886440.com-中国彩票有真实性吗| 奔驰彩票www.281877.com| www.pa75.com-取消彩票高频游戏| www.627.tv-大数据彩票能赚钱吗| www.7143.cc-爱建七彩影院| www.643922.com-购彩计划骗局| www.669429.com-彩票选码软件| www.42542.com-搜狗彩票官网| www.653093.com-大乐透彩票是假的吗| www.21nq.com-福彩3d胆码图库| www.701448.com-竞彩足彩158| www.92452.com-数字3彩神通免费版| www.67fn.com-快三分分彩漏洞| www.689885.com-盛大娱乐彩票网址| www.cp438.com-有没有正规快三平台| www.726813.com-彩票下载苹果版| www.zv31.com-彩虹破坏机-| www.604.bid-tt彩票网下载安装| www.152874.com-彩票不中包赔| www.269191.com-彩民堂app下载| www.789896.com-福彩双色球字谜| www.335891.com-广西福利彩票网| www.487605.com-代理福利彩票挣钱吗| www.34yb.com-腾讯分分彩正规| www.712772.com-美人鱼彩票是什么| www.823994.com-足彩2串1中奖概率| www.962137.com-xx彩票-| www.ex08.com-快三万能倍投计算器| www.811951.com-福彩主任王素英电话|