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.447585.com-足彩投资策略| www.189348.com-今天时时乐彩票| www.796754.com-在淘宝买彩票怎么买| www.3608.org-福彩七乐彩预測| www.772620.com-618彩票官网| www.cp7579.com-彩虹-| www.655089.com-快三猜一个号赔率| www.759571.com-彩票免费送彩金| www.882588.com-易彩是不是属于违法| www.980614.com-手机玩彩票输| www.ri5.com-广西快三精准计划网| www.503628.com-网易彩票真的吗| www.655891.com-彩票纠纷视频| www.755812.com-汇旺彩票骗局揭秘| www.948341.com-牛彩彩摘网-| www.vl59.com-彩票开机号-| www.534403.com-七星彩中三个号码| www.384908.com-9d彩票是正规的吗| www.196128.com-五分快三走势图| www.91506.com-好彩香烟买不到| www.965284.com-辽宁体育彩票官网| www.579427.com-彩的字谜-| www.mp35.com-时时彩概率科学买法| www.329447.com-汉口福彩兑奖中心| www.83qx.com-大乐透彩票兑奖时效| www.863243.com-60彩票送彩金| www.955865.com-彩影什么意思| www.cai223.com-快三彩票在线投注| www.88205.cc-小站宝彩票官网| www.199741.com-七星彩走势图| www.23637.cc-彩票达人官方网站| www.254081.com-华宇彩票下载地址| 500彩票www.50026p.com| www.682702.com-时时中彩票登录平台| www.767395.com-轩彩娱乐官网| www.850536.com-360彩票竞彩足球| www.921508.com-甘肃福彩一定牛开奖| www.982706.com-体彩微信公众号| www.ah40.com-昨天彩票开奖号码为| www.006417.com-财神彩票平台网址| www.736727.com-双色球乐彩网首页| www.15kq.com-狗万地址足彩吧| www.657454.com-黑龙江福彩客服电话| www.792228.com-3d彩摘网-| www.881841.com-彩票胆拖是什么意思| www.964073.com-吉林快三开将结果1| 大赢家彩票平台www.701250.com| www.121324.com-彩票查询软件哪个好| www.336812.com-彩票代理判刑| www.118076.com-广西快三遗漏号码| www.013.tv-北京亿彩快三| www.c99.cm-冷热分析法七星彩| www.43ir.com-北京招聘竞彩分析师| www.474.cm-彩票开发话术| www.3824.com-七星彩怪号-| www.889980.com-篮球nba竞彩推荐| www.967826.com-百合网让你买彩票| www.cp3697.com-五分快三全天计划| www.662301.com-人工智能技术彩票| www.801551.com-686彩票-| www.882185.com-稳定的彩票平台源码| www.955135.com-彩票信用网改单技术| 福彩网www.5522z.cc| www.cj29.com-高频彩怎么赚钱技巧| www.730877.com-福彩网一分快三| www.46488.com-彩客网310胜负彩| www.44iw.com-彩46app-| www.2453.com-金钱豹彩迷会| www.266911.com-中发福彩-| www.368787.com-933彩票娱乐平台| www.298.website中国足球体彩网| www.469061.cc-重庆时时彩第9期| www.69mo.com-彩之堂-| www.2137.win-彩票搞笑图-| www.81136.com-河北省福彩官网| www.115093.com-微信投注彩票| www.978565.com-福彩山东-| www.cp163.com-新吉林快三走势图| www.jm89.cc-首充送38彩金| www.161158.com-辽宁彩票站-| 天下彩www.424770.com| www.637189.com-福彩都包括啥| www.625098.com-怎么样拉客户玩彩票| www.0273.xyz-梦见中彩票遭追杀| www.839911.com-为什么要做责任彩票| www.we45.com-各体彩一等奖奖金| www.069813.com-双彩网论-| www.13914.com-竞彩网竞彩网首页| www.09996.cc-祥金彩票-| www.7nn.com-离婚后中的彩票| www.71543.com-福建体彩票11选五| www.837744.com-标准施工彩钢围挡| www.773915.com-时时彩代理犯法吗| www.974682.com-七星彩36期开奖| www.cl86.cc-一分快三助手下载| www.kv6.com-安徽快三图-| www.51605.com-鸿运彩票网下载安装| www.87726.cc-最新彩票骗局| www.22513.cc-e彩票下载-| www.34882.com-福彩3d体彩缩水| www.900365.com-e乐彩官方app| www.137890.com-六福彩怎么玩| www.3965.bid-东北女方结婚彩礼钱| www.17944.com-竞彩大神推荐| www.77795.com-杨光华彩票大王| www.29ny.com-体彩今天出什么码| www.705998.com-发彩网址-| www.977670.com-足球彩票心得| www.20rt.com-周六彩票-| www.4765.vip-南宁市福利彩票站| www.450038.com-198彩登入-| www.68aa.cc-主播里彩播什么意思| www.547953.com-金沙时时彩-| www.393596.com-凤彩网杀号定胆| www.496408.com-22彩票违法么| www.559202.com-呼市体彩中心| www.618436.com-19002期足彩| www.678328.com-3d彩民群群号| www.737321.com-新彩网字迷-| www.924713.com-中国彩票第一大奖| www.998515.com-有香港快三吗| www.830301.com-577彩票登陆| www.984939.com-彩运开心聊下载| www.198135.com-内蒙快三走势| www.10zh.com-四季彩平台用户登录| www.518318.com-七星彩五行走势图表| 大赢家彩票平台www.609712.com| www.185124.com-福利彩票有几个彩种| www.873830.com-竞彩足球彩票玩法| www.819852.com-特区彩票平台| www.511077.com-彩虹张惠妹mv| www.00869.com-注册送20彩金| www.64xj.com-怎么在网易买彩票| www.137858.com-中国福彩快三和值| www.227970.com-喜乐彩中奖号码| www.307130.com-快湖北快三的走势图| www.t94.net-时彩族怎么打不开了| www.161790.com-金碧汇彩app| www.217209.com-快彩11选五助手| www.702187.com-胜负彩14开奖结果| www.fb51.com-中国彩票会改革吗| www.948306.com-福彩改革-| www.486100.com-飞彩网-| www.566666.com-恒发彩票是真的吗| www.652573.com-广东十分彩-| www.715338.com-认可的彩票app| www.787139.com-彩先知预测-| www.852545.com-时时分分彩规律| www.911456.com-福彩公益行最近走进| www.984973.com-竞彩混合过关| www.cp2660.com-江苏快三玩法说明| www.235297.com-陕西福利彩票app| www.856053.com-辽宁快三开到几点| www.320050.com-福利彩票游戏机| www.386650.com-3d家彩论坛杀号| www.455500.com-澳门博彩戒治中心| www.340.pw-博金时时彩网投| www.47729.com-实时彩计划群骗局| www.16ej.com-a彩娱乐登录注册| www.209192.com-甘肃福彩快三助手| www.ae1.cc-中国体彩快三走势图| www.316170.com-体彩大乐透兑奖表图| www.195855.com-彩票开奖双色球中奖| www.271822.com-南粤好彩1规律|