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.801095.com-福彩频道-| www.441170.com-环彩网客服电话| www.571722.com-彩6下载应用宝| www.662029.com-竞彩中奖者-| www.755991.com-彩票出票后请核对| www.mz38.com-快三平台那个好| www.s44.net-免费体验彩金| www.60ud.com-凤凰娱乐彩票网址| www.0404.cm-微信彩票竞猜金豆| www.841288.com-孕妇彩妆十大排行榜| www.ch70.com-有幸运快三的网站| www.275129.com-分分彩假-| www.846.mobi-搜索天吉彩票论坛| www.cp7891.com-内蒙福彩-| www.972586.com-彩铅画风景难| www.108410.com-体彩足彩竞猜网| www.194669.com-北京快三福彩网| www.1817.com-时时彩被骗-| www.699636.com-时时彩群里面有托吗| www.484.org-福彩3d陈华胆码| www.802312.com-精彩大片软件下载| www.889900.com-cba体彩-| www.971341.com-彩票易位原理| www.cp8866.cc-江苏快三是不是真的| www.151594.com-彩乐汇-| www.455156.com-49956金冠彩票| www.337028.com-北京体彩网官网| www.480669.com-移动彩印怎么设置| www.590405.com-七星彩杀四位| www.5664.com-3d福彩杀号定胆| www.28795.com-彩票套取盈利合法吗| www.002288.com-七乐彩买十个号中5| www.333758.com-有人知道爱彩彩票吗| www.626177.com-浙江福彩体彩| www.677877.com-福彩微信公众号关注| www.844184.com-加强彩票市场监| 华人彩票www.040452.com| www.015131.com-快三平台时间差| www.431.net-投彩网是真的吗| www.02965.com-彩网2元网走势图| www.389301.com-杨哥说彩今天字谜| www.646268.com-足彩投注技巧汇总| www.842006.com-国足体彩-| www.966454.com-希腊时时彩-| www.oi53.com-体彩大乐透中奖查询| www.0234.in-赢彩门户网站| www.9569.org-买哪种彩票最靠谱| www.737922.com-江苏快三微信群| www.37ti.com-七乐彩杀号图谜定胆| www.503871.com-福赢门彩票-| www.808550.com-丽彩集团有限公司| www.931511.com-快三网投-| www.994342.com-彩票网站大全排行榜| www.hy13.com-中彩网快三江苏| www.661831.com-诸暨竞彩大奖| www.731594.com-易彩集团靠谱么| www.800849.com-看彩票图厍-| www.870520.com-福利彩票店几点关门| www.931903.com-中彩票图片恶搞图| www.990574.com-新②彩票网-| www.mk9.cc-五分钟幸运快三计划| www.qm19.com-易网彩票开奖查询| www.019186.com-49彩票集团是| www.15234.cc-6十丨体育彩票| www.324699.com-谁是福彩幕后老大| www.083587.com-福利彩票qq交流群| www.d19.org-三分快三预测| www.662052.com-靠谱的博彩-| www.813714.com-福彩和体彩怎么代理| 亿发彩票www.901593.com| www.8tx.cc-中国福彩37期| www.77xl.com-快乐六分彩-| www.528796.com-大六壬测福彩3d| www.640026.com-宏盛彩票分析软件| www.729408.com-彩票达人直播平台| www.800061.cc-3d彩票-| www.869535.com-808南国彩票论坛| www.928175.com-连运彩app-| www.977736.com-体彩世界杯竞猜规则| 天天乐彩票www.989569.com| www.fq68.com-今日竞彩比分| www.862746.com-19050期胜负彩| www.977899.cc-纸箱数码彩色印刷机| www.04xj.com-彩铅绘画技法培训| www.658895.com-五洲彩票登陆| www.024534.com-彩福彩票下载安装| www.184330.com-网络彩票骗局大揭密| www.332447.com-金利彩票骗局大揭秘| www.622373.com-星彩手机网-| www.715545.com-新二彩票骗局| www.150654.com-彩8正版下载| www.293412.com-信博彩票骗局揭秘| www.890920.com-微信彩票计划群| www.805667.com-浩博手机版博彩娱乐| www.177640.com-时时彩幕后控制| www.297726.com-快三怎跟最好| www.361056.com-下载7k官方彩票网| www.451178.com-杏耀彩票app| www.532556.com-临沂体彩地址| www.592240.com-福彩3d便民开机号| www.665195.com-七乐彩奖金历史| www.729896.com-福彩助手正规嘛| www.797155.com-足彩倍投-| www.32fq.com-周四有什么彩票开奖| www.055422.com-哪个平台有极速快三| www.53018.com-时时彩票平台怎么租| www.99348.com-时时彩极速规律| www.063344.com-福彩站如何退押金| www.131165.com-长葛彩礼一般给多少| www.200573.com-彩票易网手机版| www.81ak.com-体彩福彩全国开奖| www.3272.win-福彩问户-| www.907465.com-破解快三软件提款| www.813606.com-宁夏彩票中奖人| www.945415.com-福建福彩开奖| www.cai737.cc-快三计划软件手机版| www.zn47.com-快三9和值有哪些| www.65vk.com-乐和彩电脑版| www.4073.biz-内蒙福彩8066期| www.41100.com-中彩网下-| www.82889.cc-彩票双色球在哪领奖| www.8527.biz-竞彩到底几点销售| www.29629.cc-开时时彩平台哪个好| www.666138.com-爱乐透彩票软件| www.ft03.com-宝马彩app-| www.25ll.com-华彩地产老板是谁| www.979605.com-好彩香烟哪里有卖| www.df57.com-彩票达人是哪个生肖| www.137954.com-快三中奖规则及奖金| www.173743.com-大发快三-| www.301344.com-福彩三d组选走势图| www.421724.com-刚力彩芽人气| www.591771.com-青海体育彩票网管网| www.693571.com-f彩网分分快三计划| www.863415.com-彩客网电脑版官网| www.984692.com-大乐透杀号彩吧助手| www.kg77.com-彩票走势图大乐透| www.4628.vip-体彩竞球-| www.955602.com-乐彩赢0014-| www.108862.com-新濠彩票平台安全吗| www.912003.com-云南11选五5彩票| www.40878.com-壹号彩票官方网站| www.23fx.com-福彩乐彩论谈| www.6692.top-新彩网字谜图迷| www.9815.net-福彩走试图-| www.277006.com-重庆彩是不是假的| www.737844.com-山东体彩论坛双彩网| www.558767.com-彩虹的约定下载| www.1232.net-江苏快三视频讲解| www.00955.cc-3d新彩吧牛彩网| www.39371.cc-分分中彩票怎么样| www.77224.com-微信网上购彩可信吗| www.sf52.com-时时彩在线预测| www.13hq.com-腾讯十分彩是真的吗| www.312208.com-七乐彩专家杀号| www.008589.com-足彩19051开奖| www.494369.com-返回百姓彩坛平特图| www.576453.com-必发彩票下载地址| www.oc71.com-3d研彩网-| www.500987.com-易彩堂不能提现| www.618088.com-彩票真的中不了| www.956702.com-福利彩票模拟摇奖机| www.275667.com-天津市彩官方网站| www.576427.com-彩吧明儿福彩三d|