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.132729.com-世界杯足彩分析| www.97365.cc-818彩票资讯| www.767312.com-福利彩票快乐彩今日| www.928383.com-打彩票的技巧| 大赢家彩票网www.178723.com| www.41xg.com-彩票新浪彩票网| www.0304.loan-如何提高彩票销量| www.585992.com-网上彩票赌博靠谱吗| www.679035.com-糖果派对四个彩金图| www.781333.com-微彩app下载安装| www.860120.com-彩票大乐透| www.926530.com-购彩lll邀请码| www.982412.com-鸿辰国际超级福彩| www.vc9.com-乐彩骗我30万| www.tl87.com-玩彩老头排3预测| www.120456.cc-彩票人入门与技巧| www.217252.com-玩极速快三能赢钱吗| www.308728.com-佰胜9b彩票-| www.379809.com-腾讯60秒彩的漏洞| www.556940.com-七星彩怎么计算中奖| www.413355.com-快三在线开奖直播| www.736552.com-石家庄彩票一等奖| www.834822.com-好彩黑蓝价格| www.905306.com-江西快三84期开奖| www.973409.com-彩虹哥卖号可信吗| www.cai5777.com5分快三走势图| www.nv30.com-至尊快三能赚钱吗| www.61885.com-今福彩开结果| www.nt37.com-绵阳福彩中心| www.20928.cc-时时彩计划豹子预测| www.82651.com-足彩新浪比分| www.dq56.com-北京快三结束时间| www.i66.wang-3d乐彩论坛分析| www.98ut.com-竞彩足球身价对比| www.01217.com-足球彩票竞猜技巧| www.50775.com-代理商私彩赚钱吗| www.98745.com-快开彩票怎么玩法| www.396217.com-金钱豹彩报-| www.560361.com-拉霸游戏注册送彩金| www.505157.com-天下彩网-| www.230045.com-567cc彩票下载| www.360585.com-四平体彩中心地址| www.16qg.com-世爵国际重庆彩真假| www.1235.tv-博123彩票首页| www.9064.shop-3d开奖结果众彩网| www.447233.com-彩票视频讲座| www.558677.com-体彩50元的刮刮乐| www.625969.com-足彩19050冷热| www.105567.com-礼拜五开奖的彩票| www.226.tv-北京体彩管网| www.7077.me-玩快三真的有计划吗| www.26239.com-描写彩虹的古诗| www.87973.com-千禧彩票备用网址| www.102700.com-众博彩票官网| www.668870.com-体彩排列三图吧| www.758028.com-快三和值计划| www.829682.com-彩天下彩票下载安装| www.991090.com-彩票做号软件苹果版| www.so07.com-七乐彩推荐-| www.631589.com-时时彩可以控制吗| www.768098.com-中国福利彩票新闻| www.871540.com-老版腾龙时时彩| www.955220.com-500彩票破解| 多乐彩票www.367474.com| www.yw47.com-奇门测彩票3d| www.787877.com-01彩票如何提现| www.878018.com-南京福彩中心地址| www.986685.com-易网彩票软件下载| www.oz34.com-宁夏体彩总部| www.085402.com-彩票九苹果下载| www.4668.biz-龙源国际彩票骗局| www.449972.com-下载七七彩票| www.72988.cc-福彩总部电话号码| www.300307.com-快三投注计划图表| www.438544.com-彩圣网独家免费资| www.564321.com-深圳东方亮彩注塑部| www.868692.com-三宝乐购是什么彩票| www.qe93.com-60彩票娱乐-| www.331378.com-彩神ix赚钱技巧| www.695010.com-中国足球竞彩比例| www.800563.com-手机上咋卖彩票| www.878926.cc-500万彩票过滤器| www.ke42.com-360快三开奖结果| www.496882.com-国家缴税标准彩票| www.592968.com-彩虹电视台-| www.850767.com-时时彩玩法图片介绍| www.953717.com-竟彩开奖结果| 彩票5www.550247.com| www.oc62.com-中国体育彩票6+1| www.16mr.com-福彩开奖每周日期| www.96ym.com-3d摇一摇机选彩票| www.4157.cn-王茜华新剧彩虹| www.21685.cc-中国福利彩票微信| www.003748.com-江苏老快三跨度振幅| www.080928.com-福建31彩票走势图| www.486646.com-彩票后面的签名区| www.641605.com-彩票标识牌-| www.9090.vip-信彩分分彩两面| www.969140.com-体彩公益金分类| www.23762.com-彩票代购实体店出票| www.88449.cc-美国彩票税-| www.420136.com-下载网易彩票双色球| www.1361.vip-3d彩票网彩手机版| www.257908.com-13彩app下载| www.366418.com-彩铅纸品牌-| www.526646.com-时时彩怎么倍投盈利| www.511224.com-神州数字三彩票| www.95385.com-聚鑫彩票网站| www.983431.com-彩一app苹果下载| www.61845.com-双色球福彩大赢家| www.637811.com-七天彩平果版| www.55ck.com-北京体彩销售电话| www.360176.com-一号彩票网app| www.519848.com-彩票预测靠谱的| www.015603.com-七星彩定位走势图| www.re.cc-亚洲彩票是不是正规| www.008526.com-京彩挂机软件| www.52315.cc-如何网上购彩票| www.093937.com-广州彩票软件开发| www.06me.com-澳门彩开奖结果| www.4800.xyz-彩6是什么平台| www.22752.cc-大众商家彩票新快三| www.74022.com-p3双彩图-| www.2hq.com-体彩福彩官方网站| www.83cm.com-香港陆和彩开| www.2666.vip-火箭彩票官方网站| www.19926.com-时时彩平台代玩兼职| www.75720.com-博马彩票app下载| www.300711.com-中彩网是什么网站| www.134722.com-解福彩臧机图| www.34ev.com-逆袭彩票计划免费版| www.542149.com-广西七乐彩开奖结果| www.611386.com-长春彩艺-| www.up25.com-广西快三和值怎么玩| www.7076.biz-湖南七彩集团招聘| www.01415.com-电工自学彩票| www.28592.cc-彩票站什么人| 大赢家彩票网www.83033c.com| www.jg12.com-广西快三遗漏值查询| www.1nr.com-中国体彩彩票怎么玩| www.47425.com-小燕子是蓟彩芝| www.65rw.com-重庆十四彩怎么玩法| www.3248.org-冠军彩票app| www.93810.com-网易买彩票可靠吗| www.6218.xyz-随州福彩推荐| www.96194.com-星之卡比三重彩| www.237781.com-甘肃快三奖金对照表| www.3tx.cc-彩票榜是骗人的吗| www.536423.com-美国有哪些热门彩票| www.4325.wang-体彩排五开奖专| www.292853.com-河南体彩481下载| www.408605.com-节假日卖彩票吗| www.534645.com-体彩排列三五试机号| www.655618.com-湖北结婚彩礼| www.764977.com-七星彩湛江彩版网| www.833932.com-好彩36选3计算| www.885237.com-彩票代打是不是骗局| www.938428.com-彩宝网大乐透走势图| www.983474.com-贵州福彩网首页| www.cai3811.com安徽快三遗漏| www.651245.com-彩百万娱乐下载| www.789617.com-竞彩害人-| www.879629.com-易彩一彩民福地| www.946660.com-和彩和东方-|