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天

知道了
彩票123现在叫什么名字 www.751184.com-彩票巴士注册| www.898851.com-福彩试机号码查询| www.966256.com-极速快三怎么研究| 天下彩www.440689.com| www.kj81.cc-易彩票是什么网站| www.l64.cc-彩票走势图表格制作| www.54qv.com-抚州彩票中奖| www.0474.date-万彩吧彩票专家荐号| www.08606.com-7070彩票网-| www.56244.com-时时彩回本心态| www.004148.com-体彩20分钟一期| www.080004.com-彩票缴税-| www.151536.com-下载彩票缩水专家| www.273259.com-福彩与慈善-| www.365733.cc-兰州彩票中奖最近| www.451630.com-彩票十大信誉平台| www.537778.com-竞彩足球比分怎么买| www.663967.com-七星彩精准资料大全| www.747435.com-购彩网怎么注册| www.812180.com-竞彩足球实体店返点| www.892791.com-七乐彩缩水过滤软件| www.958094.com-青海福彩1到6选号| 奔驰彩票www.509866.com| www.fd37.com-彩票自动挂机骗局| www.yb64.com-新手买彩票如何选好| www.22zn.com-福彩兑奖星期六| www.0374.pw-休闲快三教学| www.6898.bid-体育七星彩票| www.21619.cc-aa1882大发彩| www.65664.com-幸运快三开奖查询| www.047955.com-3d数字彩票投注通| www.132813.com-彩票顶呱刮靠谱吗| www.213264.com-上海爱彩乐十五选五| www.288809.cc-彩票店宣传语| www.393089.com-手绘彩铅画入门| www.518968.com-金博在线彩票登陆| www.595446.com-双彩伦坛-| www.671129.com-福彩3d开售几年了| www.739520.com-汇彩网是干什么的| www.803846.com-170彩票-| www.880695.com-体彩五位数开奖结果| www.ii7.com-深圳快乐彩-| www.pj95.cc-北京福彩快3遗漏| www.01yy.com-重彩水墨画-| www.73zj.com-燕赵福彩排五开奖号| www.1555.date-诺亚彩票官网| www.30483.com-辽宁体彩领奖处| www.72842.com-涛哥2胆3d福彩| www.045125.com-福彩快三输钱的原因| www.130319.com-棒棒彩票app下载| www.205793.com-彩票计划是不是骗局| www.277772.cc-澳洲时时彩稳定计划| www.378978.com-nba篮球体彩网| www.500637.com-91彩虹哥官网| www.570711.com-德国彩票开奖号码| www.646804.com-胜负彩14场机选| www.756055.com-全民中彩ios| www.840588.com-山西体彩中奖规则| www.908291.com-福彩怎样才算中奖| www.964464.com-附近中国福利彩票站| 乐8彩票www.6539x.com| www.cv25.com-河北快三之家| www.ud38.com-浙江省快乐彩开奖| www.04oy.com-大众彩票手机客户端| www.78am.com-足彩违法-| www.1545.cc-包头青山区彩票中心| www.08911.com-福彩3论坛手机版| www.51852.cc-3d字谜新彩网吧| www.93268.com-竞彩盘的图片| www.051794.com-深圳福彩app注册| www.159881.com-福彩3d两码和差| www.245600.cc-易彩快三网址| www.315292.com-多乐彩11选5软件| www.382726.com-幸运彩快三-| www.522470.com-乐我时时彩计划网| www.588899.cc-体彩七星彩那天开奖| www.659339.com-彩票开奖第35期| www.763271.com-竞彩外围怎么买| www.836268.com-快彩为什么改时间| www.893348.com-快三走势怎么理解| www.947702.com-多彩贵州贵阳频道| www.996140.com-彩71平台怎么样| www.zx.com-彩票11选五-| www.nh08.com-皇都彩票网站评论| www.0mj.com-打开乐彩网-| www.52sk.cc-新浪爱彩不能注册| www.845.me-小鹿时时彩分析器| www.4726.biz-福利彩票双色球胆拖| www.9893.net-下载永恒彩票网| www.73633.com-体彩19083期| www.022085.com-彩易福彩字谜汇总| www.089838.com-在哪里找彩票玩家| www.148867.com-彩83彩票手机版| www.260676.com-福彩双色球怎么兑换| www.328827.com-福利彩票是国家的吗| www.390997.com-491彩票直播| www.525199.com-特彩吧报码-| www.600933.com-彩票一次买几注| www.668675.com-福彩三d牛彩网| www.739557.com-爱彩乐十一选五推荐| www.805659.com-中国竞彩网强胆推荐| www.873336.com-南国彩票7星彩论坛| www.983504.com-彩票站可以投诉么| www.tz75.com-成都体彩竞彩大奖| www.01av.com-靠谱的彩票平台出租| www.63ih.com-篮球竞彩网比分直播| www.0064.loan-美国彩票开奖规则| www.7243.net-彩虹糖果小豆机| www.17788.cc-网络竞彩骗局| www.56792.cc-时时彩龙虎玩法介绍| www.026286.com-周易与彩票选号技巧| www.096694.com-鑫彩网彩票平台| www.175370.com-福彩快三开奖湖北| www.379125.com-富彩彩票骗局| www.516077.com-彩票1288-| www.582460.com-长春快三福彩| www.672371.com-七乐彩走势图彩宝贝| www.766115.com-九号彩票手机客户端| www.871105.com-手机彩票投注官网| www.950280.com-福彩3d蓝精灵胆码| www.999567.com-福彩3000期走势| www.ez.cc-全能中彩彩票app| www.mt79.com-快三和值跨度图| www.11gi.com-博众时时彩预测软件| www.0283.net-福彩营销计划书| www.7084.top-彩票m5-| www.17499.cc-c59彩票官方下载| www.59978.com-彩票店私自坐庄| www.032917.com-梦书解梦七星彩梦册| www.133462.com-中福快三下载安装| www.256625.com-彩乐网怎么下载安装| www.378077.com-美女索20万彩礼| www.509148.com-千城彩票-| www.618705.com-打彩票上-| www.744863.com-陕西体彩兑奖流程| www.867967.com-特网彩票-| www.939559.com-中国福利彩票机选| www.988287.com-广东体彩管理中心| www.cai3155.com快三可以玩吗| www.jf40.com-外地彩票怎么兑奖| www.g19.club-手机上玩彩票犯法吗| www.50iw.com-全天快三期一计划| www.549.me-在哪里下载彩计划| www.3857.top-竞彩资讯一竞彩网| www.21606.com-每天首存送彩金平台| www.65427.com-在线彩票生成器| www.036032.com-九彩凤凰简笔画| www.124918.com-吉祥彩票官方网站| www.194629.com-11选五上海爱彩乐| www.275827.com-彩票哪个平台比较好| www.365338.cc-现金彩票app官网| www.443299.com-福彩3d大花猫彩报| www.539764.com-福州体彩转让信息| www.626900.com-今日彩票幸运号| www.695706.com-足彩复式投注计算| www.776549.com-唐龙说彩今日点评| www.881632.com-名气最大的黑彩平台| www.953074.com-福利彩票怎么买的| www.990857.com-旺彩百家是哪个平台| www.cai905.cc-江苏快三彩票| www.wb46.com-人人中彩官网| www.19ki.com-泰安彩票最高奖| www.0509.biz-查询福彩开奖号码| www.6340.cn-彩票如何造假|