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天

知道了
58福彩 www.8068.loan-名家水彩花卉| www.518910.com-q彩在哪下-| www.611685.com-彩虹岛水果辅助| www.688693.com-头条号老谢说彩| www.784446.com-什么叫网彩-| www.861248.com-吉林快三快彩网| www.930271.com-爱淘彩票app| www.989770.com-彩民乐阳光探吗图| www.cd24.com-福彩旗下的快开彩| www.381098.com-福利彩票论坛| www.970468.com-买彩票团队-| www.nt0.cc-福彩人人快3| www.9175.biz-七星彩万字正版图| www.230793.com-彩运8软件是真的吗| www.350652.com-佳缘上的时时彩骗局| www.61ag.com-最新一期彩票开奖| www.510410.com-乐迎彩票下载安装| www.671649.com-以前万彩吧-| www.0491.cc-d胜负彩360-| www.7711.ren-彩票兑奖注意事项| www.38505.com-彩之乐下载-| www.128546.com-彩吧图库小军第二版| www.236827.com-中国体彩官网app| www.329973.com-北京快三计划微信群| www.493525.com-时时彩私彩平台运营| www.589290.com-体育彩票足球竞猜| www.711827.com-c58.彩票-| www.827925.com-手机彩票红包聊天室| www.941843.com-网络黑彩代理| www.6765.biz-彩票对子是什么意思| www.45962.com-彩票带单老师微信号| www.952617.com-福利彩票117| www.698285.com-彩库宝典正版下载| www.939333.com-北京单场足彩推荐| www.027541.com-诚信可靠的高频彩种| www.157513.com-足彩计算公式| www.317076.com-多期彩票怎么兑奖| www.453245.com-福利彩票领奖去哪里| www.ac30.com-解密彩票之谜大揭秘| www.355756.com-福彩有分分彩吗| www.543528.com-北京中国体彩报| www.636340.com-彩虹糖机器怎么做| www.0399.cm-买体彩外围犯法吗| www.3783.org-808福彩有问题吗| www.3220.net-爰彩乐官网-| www.948691.com-微信群吉林快三| www.151178.com-香港的彩票网站| www.56iq.com-江苏省爱彩乐十一选| www.58012.com-爱彩人基本走势图| www.026668.com-体彩第19018期| www.170649.com-马来3分彩开奖| www.263223.com-官方彩票投注网站| www.34rl.com-彩票的故事-| www.882080.com-网上做兼职玩彩票| www.964953.com-彩票购买点有监控么| www.cai1990.com北京快三形态走势| www.338988.com-军长14场足彩| www.pp87.com-爱彩乐彩票网正规吗| www.890653.com-彩票平台刷返利教程| 68彩票www.68682q.com| www.85ka.com-竞彩蓝球玩法讲解| www.962737.com-3d彩吧牛彩图库| www.25jw.com-华彩咨询员工落户| www.65xd.com-福彩专营-| www.l25.com-彩票2元中奖故事| www.286332.com-炫乐彩票是不是真的| www.272935.com-福彩内部号-| www.mk36.com-湖北省利川市三彩| www.065959.com-彩虹六号战绩查询| www.0545.top-福彩中心3d字谜| www.226022.com-体彩三d-| www.649807.com-彩色玉米粉怎么清理| www.212182.com-江苏快三大小规律| www.222242.com-下载app彩票软件| www.988981.com-中福彩票线上投注| www.zn51.com-分分快三怎么买和值| www.459261.com-福彩排三大小走势图| www.8964.me-预言家专业彩票计划| www.779636.com-大同体彩中心| www.916794.com-tctx体彩-| www.986756.com-竞彩篮球比分推荐| 盈发彩票www.22yfa.com| www.639370.com-河南体彩自助终端机| www.346441.com-李彩桦图片-| www.462123.com-三d体彩开奖结果| www.556004.com-通辽快三开奖结果| www.762881.com-时时彩万能码公式| www.874431.com-重庆时彩时彩走势图| www.984424.com-福利彩票还可以买吗| www.222464.com-什么彩票网站最安全| 500万彩票www.35155t.com| www.70313.com-鼎盛彩票注册| www.890811.com-青岛福彩快三查询| www.120.pink-六色彩虹缺哪个颜色| www.15453.com-嘉兴市福彩中心| www.672130.com-特彩吧最老版| www.752371.com-c29彩票网登陆| www.876378.com-凤凰彩票漏洞| www.946617.com-东方6十丨福彩| www.990722.com-河北福彩网官网公示| www.qm4.cc-大发快三怎样追豹子| www.866922.com-什么彩票买一个数字| www.953934.com-牛蛙彩票现场直播| 500万彩票www.500cd.com| www.050206.com-3d彩吧图库总汇| www.9796.cn-七星彩领奖期限| www.179884.com-好河南快三开奖结果| www.50uo.com-福彩双色球超级助手| www.686085.com-3d彩票杀码-| www.788642.com-竞彩官网首页计算| www.nd9.com-湖北快三查询| www.675338.com-福彩解太湖分析汇总| www.760454.com-汪汪时时彩-| www.61166.com-彩票推荐网站双色球| www.035003.com-青岛市福彩中心| www.19tx.com-彩票平推是什么意思| www.026033.com-11选5黑彩破解| www.99726.cc-香港高频彩票| www.sy12.cc-七星彩两个号多少钱| www.53mr.com-新浪官网首页彩票| www.64bs.com-足彩公众号排名榜| www.950962.com-周易预测彩票的高手| www.oi32.com-江苏体彩ll选5| www.95yl.com-云南昆明体育彩票| www.566909.com-二四六好彩-| www.943615.cc-连连中彩票app| www.59299.com-如何申请卖福彩| 大赢家彩票平台www.369073.com| www.vb06.com-河南福彩网首页| www.wn29.com-快三012路秘籍| www.01611.com-足彩推荐靠谱的软件| www.538791.com-爱心彩票app| www.vb60.com-网投彩票骗局| www.5078.com-竞彩足球18年停售| www.26162.cc-比喻彩虹像什么| www.86532.cc-豹子王作弊挂彩票| www.277508.com-彩票杀大赔小的规律| www.377410.com-977官方彩票| www.498667.com-竞彩缴税吗-| www.500850.com-易彩堂总公司这哪里| www.233449.com-众彩网手机版| www.447080.com-安装彩票软件下载| www.548096.com-分分彩到底能不能玩| 中国福利彩票www.34788j.com| www.871569.com-南京丰彩涂料| www.6567.com-深圳市鑫彩晨科技| www.61229.cc-爱彩票安卓-| www.59976.cc-彩霸王论坛资料大全| www.6508.net-2019七星彩票| www.26477.com-菲律宾彩票网站租用| www.528218.com-第一台彩色相机下载| www.fg15.com-彩票娱乐送28元| www.ti95.com-36o彩票网-| www.698228.com-浙江省体彩征召| www.781548.com-多宝彩票平台合法吗| www.57yb.com-彩票机出租或转让| www.736.me-博盈福彩是不是骗局| www.11257.cc-中国体彩网四川| www.358760.com-广西快三最大遗漏表| www.28111.cc-常州体彩中奖| www.099367.com-做梦彩票中奖了| www.080033.com-腾讯三分彩走势图| www.69318.com-中国竞彩网赛事公告| www.65116.cc-竞彩算不算赌|