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天

知道了
彩01彩票 www.54422.cc-皇轩彩票-| www.51ym.com-极彩在线登录| www.388649.com-七星彩体育彩票开奖| www.656093.com-星彩代挂-| www.806763.com-7号彩票网址| www.950563.com-福彩3d杀跨-| www.fz89.com-大发快三作弊器| www.4uo.com-福彩快3中奖查询| www.10169.com-9号彩票app下载| www.78381.com-福彩3d万能四码表| www.89ez.com-澳博彩票-| www.02408.com-重庆福彩手机报网址| www.739461.com-一中体彩竞彩实体店| www.233646.com-河北燕赵福彩网官网| www.1296.vip-彩票书籍电子版下载| www.6009.pw-福彩消消乐中25万| 9号彩票www.80767s.com| www.602400.com-彩票破了一点点小角| www.709234.com-腾讯分分彩杀号方法| www.019708.com-福彩三的红五图库| www.6600.org-乐都彩票官方网站| www.sn54.com-时时彩包胆计划技巧| www.456328.com-彩票平台领取彩金| www.127467.com-官方彩票软件能买嘛| www.vn15.com-吉林快三遗漏走势图| www.73kz.com-7728彩票正规吗| www.89467.com-梦见自己选彩票号码| www.778722.com-汇西多乐彩11选5| www.925375.com-彩票平台代理犯法吗| 虹彩集团www.hcjt5.com| www.60yr.com-青蛙彩票四不像图| www.922667.com-「人人买彩票| www.995136.com-支付宝彩票扫码兑奖| www.jn32.com-网上彩票属于诈骗| www.300.hk-彩40-| www.002423.com-霍华德彩票聪明组合| www.609078.com-加盟代理彩票时时彩| www.703357.com-彩票大奖兑奖流程| www.808569.com-中彩票心得-| www.881463.com-22彩票合法吗| www.953994.com-网上计划彩票| QQ彩票www.89894s.com| www.lt11.cc-中彩网提现-| www.893722.com-网上下载彩票软件| www.823922.com-天气网福彩预测总汇| www.949726.com-快三开挂器下载软件| 盛大彩票www.aj3383.com| www.267819.com-天津体彩app| www.073198.com-广东彩票中心官网| www.565320.com-3d蓝精灵彩报图| www.013885.com-七星彩割码规律图| www.5098.cm-关于彩票的搞笑说说| www.18225.cc-万家彩票网和买| www.52664.com-一分钟彩票app| www.006256.com-外围彩票网站大全| www.8512.biz-799mu全彩-| www.325289.com-海南四码彩票资料| 500彩票网www.897030.com| www.39912.com-彩票聋哑人-| www.001378.com-极速快三能玩吗| www.cp7275.com-大发快三最稳的倍投| www.358847.com-娱乐江苏乐彩| www.27tc.com-注册福利彩票账号| www.631067.com-趣彩-| www.0141.cm-彩色的定义-| www.69fb.com-4scc彩票最齐全| www.021589.com-幸运分分彩走势图| www.847060.com-如何网上买三地福彩| www.922342.com-广东彩票365| www.979767.com-快三预测助赢| www.am59.com-安微快三-| www.jz00.com-彩票旗舰网-| 大赢家彩票www.5086o.com| www.861281.com-彩票开奖结果我| www.112321.com-彩票游戏送彩金活动| www.221611.com-瑞彩祥云彩票安全吗| www.332564.com-黑彩平台10大平台| www.sr0.cc-重庆时彩官网开奖| www.yb36.com-新彊福利彩票| www.3834.vip-2019福彩新规| www.05850.com-500万足球彩票网| www.335910.com-体育彩票多少个号码| www.29094.com-彩票倍投软件| www.947596.com-购彩论坛网址| www.cp623.com-彩神1-| www.1013.love-火剪彩票下载安装| www.3348.net-分析彩票的软件有吗| www.309744.com-延吉福利彩票站| www.052278.com-星光彩票app完整| www.051952.com-福利彩票1360| www.063336.com-彩票生意-| www.46381.com-彩票团队人工计划| www.16637.cc-吉林福彩快三推测| www.81131.com-3d彩报布衣电子报| www.115107.com-三d彩神通预测| www.537876.com-威尼斯彩色岛怎么去| www.638372.com-附近哪有体彩销售点| www.709336.com-网上叫你买彩票的人| www.779839.com-彩票游戏机样泡泡| www.894966.com-网彩七彩合法吗| www.963073.com-体彩四场进球预测| 9号彩票www.80767z.com| www.054464.com-竞彩足球推荐专家| www.92126.com-一定牛彩票老版本| www.044363.com-七星彩推荐号码预测| www.223388.cc-江苏省福彩-| www.26171.cc-手电筒彩虹实验| www.018168.com-彩票大家赢走势图| www.411590.com-竞彩网首页258| www.515693.com-彩天堂黑钱了吗| www.208263.com-吉林快三投注网站| www.87648.com-唯彩会软件下载安装| www.sx33.com-最简单的彩票玩法| www.86cu.com-福彩3d杀号网| www.593.date-福彩3d便民工作室| www.8185.in-高频彩票时间调整| www.32315.cc-彩钢瓦围挡材质图片| www.77329.cc-手机彩票犯法吗| www.032736.com-派彩电视走势图下载| www.216193.com-南洋彩网站资料| www.887535.cc-2044彩票网址| www.942247.com-刚力彩芽比基尼| www.536581.com-彩票分什么类型| www.979314.com-俄罗斯好彩香烟| www.5dp.cc-3d彩吧红五图库| www.927531.com-app彩票坊-| www.780938.com-彩库宝典下载软件| www.851702.com-时时彩安卓版下载| www.816664.com-昨晚福彩开什么奖| www.973154.com-枯萎的彩虹玫瑰| www.sq23.com-彩票预测号码| www.411987.com-彩钢棚做法详细图解| www.712363.com-江西结婚彩礼多少钱| www.280043.com-福彩快乐12-| www.025709.com-福彩3d杀码专家| www.321605.com-安卓彩票预测系统| www.235565.com-6678彩票骗局| www.362506.com-一年级彩虹-| www.565783.com-河南帝彩快3真假| www.dw66.com-易彩彩名福地| www.zp59.com-福彩3d新玩法规则| www.365709.cc-彩铅自学视频教程| www.893025.com-大师彩票-| www.507662.com-福彩69期开奖| www.40wm.com-网上怎么购买七星彩| www.811607.com-qq手机彩票网| www.083911.com-智博彩票网微信号| www.74302.com-彩虹旗emoji| www.04888.cc-手机怎么微信卖彩票| www.128526.com-超级彩票16亿| www.3083.com-澳葡风彩开奖| www.397245.com-乐盈彩软件-| www.790830.com-申请免费彩金58| www.900609.com-粤淘彩票是真的吗| www.977104.com-彩礼的范畴-| www.cai8766.com快三开奖查询上海| 500彩票www.50024g.com| www.824677.com-体彩大乐透机选| www.906925.com-河南省彩票品种| 创世纪彩票www.36787g.com| www.477296.com-7星彩玩法开奖公告| www.704677.com-万家彩票网址| 13e彩票www.705059.com| www.003938.com-盈彩计划网-|