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.662by.com| www.aj96.com-手机上怎么买七星彩| www.38bp.com-七星彩破解-| www.7062.pw-百度天下彩-| www.005073.com-福利彩票最近走势图| www.175273.com-代理快三刷流水| www.345393.cc-易算彩彩票预测| www.kf6.com-吉林彩票网-| www.5ti.cc-体彩足球竞彩上税| www.2170.vip-福彩藏机图正版| www.22396.cc-彩礼分手-| www.021423.com-全国体彩销量排名| www.134222.com-快三黑客软件下载| www.369047.com-3d福彩图纸322| www.645678.cc-专业彩票师心得| www.686116.com-赛马结果及派彩| www.883414.com-彩票有啥软件app| www.aw60.com-福利彩票5d开奖号| www.uk51.com-彩铅画作品古风女| www.89fb.com-新浪澳彩动态| www.074118.com-体彩排双胆预测| www.158507.com-365彩票官网| www.255132.com-正义彩-| www.357886.com-大乐透彩票开奖等级| www.569595.com-彩票打票员好学吗| www.703345.cc-彩票33网页版| www.894927.com-悠悠双色球购彩| 誉信彩票www.757q.com| www.rz91.com-快三秒热水器水小| www.72am.com-彩票11选5北京| www.3036.cm-彩票app360-| www.11879.cc-超级彩票骗局| www.86666.cc-福建快三开奖上结果| www.134729.com-体彩七位数走势图表| www.256728.com-中彩网快三一分快三| www.365429.cc-手机玩快三的网址| www.497722.com-福牛网彩票下载软件| www.857111.cc-今天彩票中奖单号| www.952647.com-78彩票app官网| www.ab05.com-福彩开奖是多少| www.814992.com-广州体彩快中彩开奖| www.311654.com-廊坊快三彩票开| www.779566.com-七星彩票中奖号码| www.964422.com-国家体育彩票| www.sg60.com-时时彩出豹子的预兆| www.607618.com-足彩对阵麦-| www.819795.com-玩彩怎么才能赚钱| www.nf39.com-皇都彩票黑平台| www.sp25.com-e球彩2码聪明组合| www.1468.com-腾龙时时彩做号计划| www.353690.com-亚太博彩-| www.580216.com-必中彩票计划软件| www.786065.com-大赢家极速时时彩| www.981632.com-q彩网快3-| www.wv88.com-彩票排列三九宫图| www.804072.com-竞彩猫怎么收费| www.al93.com-七星彩奇偶走势图| www.9322.com-佛弟子能买彩票吗| www.094444.com-体彩19025开奖| www.233016.com-88爱彩江苏快3| www.561079.com-开网站卖彩票挣钱吗| www.753279.com-中彩吧五分彩可信吗| www.621386.com-快乐三分彩怎么下載| www.938522.com-众益彩app-| www.gx39.com-百盈快三邀请码| www.731243.com-福彩三d和尾走势图| www.fy62.com-搜索中国福利彩票| www.31eo.com-彩虹岛手游台服| www.8027.biz-云南彩辫-| www.40266.com-手机投注三分彩| www.398076.com-彩票3d论坛-| www.653098.com-贵州快三预测结果| www.914419.com-彩票166登陆| www.978143.com-四川彩钢围挡价格| www.lt87.com-微彩排列五论坛| www.43lw.com-竞彩足球串关计算器| www.785.cm-浙江体彩31选7| www.917.online-中国福彩积分查询| www.167697.com-江苏快三的开奖结果| www.5966.org-胜负彩实时直播| www.428211.com-369足彩缩水软件| www.653883.com-奔腾彩票平台提现| www.869716.com-福彩走势图模板| www.998860.com-微信彩票在哪里买| www.800483.com-快三二同号多少钱| www.949487.com-足彩北单只能在北京| www.27ns.com-体彩小熊猫图谜| www.588008.com-天天红单彩票app| www.83zx.com-彩票双色球号码顺序| www.66wx.cc-乐彩彩票百度旗下| www.892062.com-快彩分析软件| www.59375.com-彩铅画人物简单| www.3142.xyz-体彩中心举报电话| www.802898.com-双彩票中奖者| www.964364.com-湖南省体彩中心地址| www.974510.cc-彩运来官网手机登录| www.vi9.com-大马彩票下载| www.024376.com-福利彩票五行属性| www.28157.com-彩票会不会有假| www.148831.com-湖北福彩5d-| www.343990.com-中体彩购票-| www.881946.com-八彩票软件-| www.po28.com-山东福彩网群英会| www.31tv.com-19号的福利彩票| www.6449.vip-5d工番全彩漫画| www.85776.cc-搜索粉百合彩吧| www.968314.com-时时彩导师的骗局| www.70ce.com-中彩票网首页| www.5840.wang-竞彩足球半全场技巧| www.36003.com-彩皇网怎么样| www.078863.com-彩票开奖了-| www.2047.net-彩虹画太阳儿童画| www.79385.com-香港买彩金值多少钱| www.077708.com-算局画规七星彩奖表| www.949681.com-上海快三新手怎么玩| www.89070.com-神灯彩票-| www.114310.com-668la彩票-| www.636585.com-下载重庆市彩时彩| www.26nw.com-乐彩字谜图谜论坛| www.3603.win-香港六星彩开奖结果| www.49353.com-什么是极速时时彩| www.129363.com-今日体彩双双字谜| www.229790.com-彩票大全app| www.332095.com-佳缘上的彩票骗局| www.132799.com-彩猫注册官网| www.701901.com-通过微信拉人玩竞彩| www.583557.com-首存送彩金平台| www.737420.com-澳门意大利彩金项链| www.yv41.com-山东体彩如何兑奖| www.915545.com-重庆时彩下载| www.3526.win-彩八万彩票网站首页| www.lb24.com-234彩票登陆| www.945356.com-乐8网彩票app| www.385620.com-福彩电脑-| www.77408.com-众乐彩票是真的吗| www.595684.com-浙江福彩中心在哪里| www.5391.cn-手机上买的北京快三| www.695511.com-竞彩足球交流群| www.803833.com-彩中彩平台app| www.946636.com-福彩6十i开奖结果| www.370753.com-彩进娱乐黑钱| 600万彩票www.679822.com| www.677284.com-快递彩色包装袋| www.53749.com-有没有澳洲时时彩| www.3en.com-福彩派奖-| www.622011.com-彩票全世界统一嘛| www.731145.com-彩神争邀请码| www.4264.cn-维彩会-| www.000385.com-6合1彩票-| www.119413.com-中国全民快三| www.55827.cc-黄金8彩票网可靠吗| www.113410.com-古铜彩拍卖-| www.275728.com-北京时时彩购彩| www.653018.com-重庆时时彩2期必中| www.944659.com-有盈彩票-| 大赢家彩票平台www.926857.com| www.394456.com-台湾彩虹网-| www.440669.com-百宝彩票靠谱| www.569654.com-彩城彩票注册是干嘛| www.686289.com-那个高频彩玩的人多| www.867392.com-那个彩票网站最正规| www.616738.com-中奖彩票掉了| www.97al.com-湖北福彩微信二维码| www.6545.com-信彩彩票投注平台|