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.qw57.com-二分彩开奖号| www.nk68.com-新浪足彩网页| www.797058.com-双色球彩票多久过期| www.190541.com-大发快三怎么看规律| www.06011.com-彩票走势图非凡| www.194808.com-正规十大搏彩网站| www.8777.hk-爱彩彩票下载到手机| www.097727.com-微信玩快三是真的吗| www.020843.com-彩票平台租用| www.90798.cc-安装全民足彩彩票| www.56430.cc-福彩有哪些高频彩种| www.1942.net-福彩3d杀号袁紫光| www.948423.com-福彩3d今天小鱼图| www.75699.cc-申航彩票骗局| www.402960.com-快三出号概率| 500万彩票www.5441g.com| www.3730.org-搜一下七星彩| www.100129.com-8炫彩福利彩票玩法| www.9097.vip-七乐彩开奖现场视频| www.21aj.com-实时彩平台出租| www.mj68.com-福彩3d图谜第二版| www.715321.com-彩票店国家允许吗| www.222070.com-广东体育彩票| www.204068.com-3d彩票的玩法| www.372782.com-大云彩票-| www.592491.com-珐琅彩瓷器价格行情| www.902630.com-亚洲最大彩票平台| 彩票大家乐www.21202s.com| www.wx99.cc-i北京快三助手| www.3303.net-166彩票网址| www.29003.cc-大发彩票登录地址| www.0964.cn-有谁知道六开彩网站| www.593122.com-电视剧彩虹第一集| www.949835.com-九州彩票网手机版| www.65mg.com-体彩湖北11选择5| www.yv46.com-淄博福彩中心| www.800209.com-中国体彩500| www.84275.com-彩钢pvc卷材| www.qx3.cc-北京快三一定牛走势| www.369464.com-旺旺彩票官方下载| www.009590.com-305彩票app-| www.63154.com-腾讯qq彩票-| www.gx77.com-共享彩票的网址多少| www.97tn.com-口碑好的彩票平台| www.04811.com-现在最好的彩票软件| www.118078.com-体彩杀码图-| www.91166.cc-日本好彩香烟| www.083888.com-时时彩刷量方案| www.412314.com-竞彩足球比分计算| www.781721.com-彩票多少钱上税| www.953211.com-福彩3dapp-| www.ce02.cc-彩票自助机怎么申请| www.92852.com-彩库助手安装| www.218067.com-亿彩app下载| www.322897.com-查彩票开奖下载什么| www.840093.com-电脑彩正版图片| www.921663.com-中彩网假吗-| www.979896.com-竞彩胜平负比分| www.gq7.com-北京快三跨度怎么玩| www.007663.com-k彩手机版注册| www.40is.com-七星彩资料统计吧| www.321708.com-特区彩票论坛七星彩| www.155318.com-复式彩票中奖计算表| www.277589.com-众赢彩票团队| www.0509.cn-精彩网站-| www.542084.com-福彩3d彩票大盈家| www.1xu.com-彩色铅笔袋-| www.127435.com-178彩票网靠谱么| www.373579.com-王者彩票平台登陆| www.894821.com-全天五分快三计划表| www.992789.com-中彩在线不能提现| www.rs13.com-彩票中大奖兑奖快吗| www.74jh.com-环球彩票怎么样| www.2317.net-福彩中几亿-| www.00504.cc-支付宝怎么玩彩票| www.271848.com-湖北福彩30选5| www.362864.com-彩虹羽泉歌词解析| www.4276.biz-彩域传奇专家专栏| www.881414.com-88彩票网合法吗| www.971673.com-444彩票app-| www.cp160.com-怎么看快三走势| www.216206.com-七星彩彩票网站源码| www.886370.com-彩票大赢l家| www.997997.com-大发彩票登陆| www.xy84.com-下一个贵州快三| www.80278.com-体彩排三今天中奖号| www.9917.net-新鑫鸿彩票合法吗| www.3576.vip-星力捕鱼送彩金| www.957522.com-14场足彩预测| www.ff62.com-彩票几天开一次| www.31lm.com-奇门测彩3d实例| www.qa82.com-国家彩票害死多少人| www.029597.com-爱投彩票ios| www.37067.com-java彩票系统| www.75171.com-福彩形式-| www.465738.com-网易竞彩足球预测| www.7463.cc-余姚体彩中心在哪里| www.099197.com-体彩复式-| www.586057.com-皇马国际彩票| www.299152.com-六开彩开奖结果開| www.073553.com-福彩彩票3d-| www.759011.com-彩8万是真的假的| www.408579.com-国庆彩票销售放假吗| www.7885.in-玩时时彩的个人经验| 福彩www.26878p.com| www.75xw.com-福彩3d查询表| www.0315.date-釉下彩盖碗鉴定| www.421850.com-彩票中奖会被抢吗| www.571268.com-太湖字谜中彩网| www.652583.com-港股博彩股有那几只| www.021825.com-体肓彩票大乐透规则| www.954726.com-彩票77官网怎么样| www.4117.vip-海南七星彩在线投注| www.811272.com-山西福彩3d走势图| www.912419.com-彩客网靠谱么| www.987664.com-百乐彩票网下载| www.470.in-快三为什么要限号| www.13239.cc-彩客网赛果概率分析| www.026071.com-澳博快开彩票| www.146567.com-体彩排3和值速查表| www.253366.com-好彩妹台词-| www.355021.com-时时彩后二稳赚霸主| www.575195.com-时时彩漏洞改单| www.655739.com-生日彩票生成器| www.766957.com-湖北福利彩票块3| www.tr05.com-安徽快三贴吧| www.80232.com-金豪国际博彩| www.634745.com-新德里彩票哪里的| www.782098.com-7天彩苹果下载| www.9609.loan-福利彩票造假事件| www.49500.cc-时时彩后一必中规律| www.037724.com-彩票行家-| www.115332.com-移动彩票官网| www.236056.com-乐赢彩票合法吗| www.350758.com-手机彩膜diy| www.434849.com-彩39软件下载| www.571502.com-今天东盛彩报1| www.662178.com-亚博科技互联网彩票| www.881478.com-十三国际彩票| 彩神网www.csw288.com| www.tk00.com-1216亚洲彩票网| www.wq36.com-彩票趋势吧-| www.30wp.com-彩色玫瑰图片| www.0694.cm-彩票机换纸视频| www.5219.org-有人中过彩票吗| www.40yg.com-体彩大乐透几号放假| www.025177.com-58彩票官方下载| www.699081.com-微信群的快三靠谱吗| www.055297.com-买彩票最多几位数| www.141164.com-老猫出彩-| www.h59.club-博皇走势预测快三| www.637350.com-湖南彩票快乐十分| www.923568.com-广东福彩网官方网| www.66996.cc-领奖彩票平台合法吗| www.mt05.com-河北福彩网官网首页| www.388236.com-华彩集团宽甸| www.716016.com-众购彩票赌-| www.369590.com-足球彩票19017| www.575172.com-22时时彩平台| www.kg21.cc-体彩网大乐透走势图| www.7358.vip-9811彩票-| www.038739.com-彩票中心大厅下载| www.316256.com-中国竞彩店怎么申请| www.419865.com-二元彩票走势图大全|