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.78785.cc-竞彩平台哪个好| www.106782.com-地方彩票走势图| www.198846.com-购买彩票平台| www.286610.com-福利彩票室内装修| www.529626.com-台湾公益彩总站开奖| www.639094.com-宁波体彩店申请电话| www.751808.com-快三上海走势图| www.857422.com-8号彩票投注安全吗| www.923574.com-秒速时时彩官网| www.989847.com-彩票888com-| www.64684.com-竞彩001特点| www.123419.cc-最新彩票信息网| www.260544.com-福彩快3网上查询| www.337303.com-双阳区快三赌博案| www.416615.com-时时彩杂六半顺帖子| www.765407.com-足彩500万电脑版| www.931607.com-如何看彩票中奖没有| 818合彩www.www.1555hc.com| www.gd31.com-彩虹世界-| www.s01.top-体彩世界杯彩票| www.56ic.com-甘肃时时彩qq群| www.3090.xyz-彩吧三版-| www.05101.com-福彩3d算胆软件| www.68180.cc-大发彩网站登录| www.073397.com-豹赢彩票ios| www.150179.com-幸运365彩票下载| www.275390.com-北京快三和值图| www.369644.com-凤凰vip彩票计划| www.461200.com-彩宝网试机号今天| www.555778.com-至尊专业彩票平台| www.670160.com-彩票组合打黑一胆| www.776783.com-竞彩大小球-| www.864033.com-体彩五星彩查询| www.928210.com-九万彩票可是骗局| www.983605.com-玩时时彩的app| www.gt45.com-36选7好彩1奖金| www.c90.cc-百宝彩中奖怎样计算| www.36oe.com-百万彩票方言下载| www.3452.org-阿理彩票是什么网址| www.9264.cc-五乐彩犯罪吗| www.72406.com-快三彩票大小单双| www.049461.com-貴州福彩下载| www.161184.com-清乾隆多种釉彩大瓶| www.267996.com-8号彩票-| www.366229.com-儿童彩笔画-| www.495161.com-街机博彩游戏安卓版| www.569068.com-福彩双色球定胆技巧| www.678922.com-福彩201-| www.777234.com-优乐彩票在线登入| www.868049.com-南国体彩论坛4十1| 500彩票www.50051k.com| www.fu79.com-快三连号最大遗漏| www.yi94.com-彩票高手计划软件| www.16jj.com-幸运彩3132-| www.2021.biz-丰大彩票下载| www.8033.net-赌十字彩玩法| www.36241.com-福彩888-| www.89849.com-体彩排列跨度振幅| www.040138.cc-彩票合买的图片| www.215717.com-青海快三平台网址| www.288569.com-竞彩足球稳赚全包法| www.414689.com-彩96网站可靠吗| www.522083.com-高频彩每天赌两把| www.687116.com-江南彩姐预测| www.762608.com-正版香港挂牌彩图| www.888925.com-神彩争霸ll-| www.967082.com-怎么买福彩3d| www.cp1919.com-快三稳赚技巧| www.mh32.com-足球彩票论坛app| www.581083.com-中国福彩广西快三| www.0528.site-987彩票-| www.8509.top-五分彩官五分彩官网| www.50489.com-长春彩票平台搭建| www.96921.cc-中国体彩可信吗| www.077456.com-趣彩彩票官网| www.182113.com-下载北京彩票快3| www.275242.com-一分时时彩预测| www.383106.com-3月5号体彩七星彩| www.517284.com-今日福彩预测图| www.599109.com-快赢彩票app| www.662881.com-国彩单关-| www.786375.com-彩票大赢家首页| www.875996.com-e球彩任二最划算| www.972472.com-彩票大乐透杀号| www.az09.com-乐彩网3d走势| www.ws56.com-一分钟一期快三| www.15gt.com-易彩乐全国玩法| www.813.in-耐克彩虹鞋-| www.4323.cm-福彩玩游戏的地方| www.9796.biz-爱乐彩快三下载| www.71380.com-中彩网双色球开奖号| www.024234.com-新福利彩票543站| www.097269.com-今天三d彩报| www.159951.com-永輝彩票下载| www.303523.com-双彩论坛3d和值谜| www.376875.com-彩宝贝彩票网官网| www.521004.com-黑彩平台幕后| www.599277.com-买彩票怎么样买| www.666977.com-乐彩vip网页版| www.777344.com-体育e球彩-| www.871320.com-彩71彩票网-| www.981450.com-什么是彩票返点| www.mk3.cc-一分快三计划团队| www.nj16.com-竞彩足球购彩大厅| www.v72.cn-电脑版牛材网彩摘网| www.42mx.com-竞彩网首页258| www.219.cc-开心网七星彩| www.3012.vip-谜底是彩字的谜语| www.7983.biz-nba博彩规则| www.21659.cc-彩票黄历预测号码| www.59143.com-明发彩票下载安装| www.061080.com-好彩客有多少人玩| www.131545.com-长春体彩中奖率高| www.197447.com-发达娱乐彩票合法吗| www.259077.com-广西彩票选号助手| www.320758.com-盈盛国际时时彩网址| www.382031.com-点击看更多精彩视频| www.533007.com-体彩7星彩购买| www.603837.com-佬牛足彩19041| www.665165.com-七星彩哪天开奖日期| www.728053.com-澳客体彩官网| www.789370.com-彩妆加盟店排行榜| www.854967.com-开门彩福彩官方下载| www.912575.com-5a彩票网靠谱么| www.967502.com-彩票双色球开奖查询| www.da94.com-彩神1软件-| www.rt07.com-众彩网专家推荐汇总| www.9yn.com-彩票几点不能买了| www.54pq.com-福利彩票买几个数字| www.473.win-快三是如何开奖的| www.3230.vip-安徽快三什么意思| www.7927.biz-七彩椒图片-| www.19355.cc-快速彩票app| www.55262.com-时时彩提前开奖30| www.91354.com-好彩香烟四色宝珠| www.043906.com-河南福彩扫一扫下载| www.193787.com-体彩我-| www.253630.com-极速时时彩是真的吗| www.312365.com-一定牛体彩版本下载| www.368806.com-河内五分彩合买平台| www.444724.com-你朱眸里的五彩世界| www.521070.com-福彩3d精准彩票群| www.576875.com-人人彩球-| www.643897.com-好彩票977-| www.783600.com-三d彩吧论坛| www.844144.com-县级体育彩票归谁管| www.897876.com-彩票业务员拉人话术| www.954483.com-彩宝网走势图带连线| www.995947.com-佬牛足彩18085| www.cai9744.com快三开奖助手下载| www.hv14.com-快三准确的杀号| www.vo00.com-福彩开奖公告查询| www.7aj.com-宁波彩票-| www.50qz.com-天空行天下彩票| www.247.la-体彩快乐十分钟| www.2540.org-腾讯彩票游戏骗局| www.7109.vip-96购彩-| www.11643.com-足球彩票怎么看中奖| www.44279.com-全民乐彩票可靠吗| www.79951.cc-腾讯彩票游戏正规嘛| www.020447.com-彩83软件下载| www.071799.com-彩70平台-| www.123495.com-双色彩票信息| www.178444.com-广东快乐彩开奖结果|