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天

知道了
9彩注册 www.964619.com-6701彩票app| www.if85.com-彩票中奖故事| www.8281.bid-南昌彩票店-| www.811394.com-太子彩票app下载| www.586804.com-彩世界官网下载| www.798815.com-测彩-| www.952039.com-彩神可靠吗-| www.jx11.com-彩票计算器-| www.060050.com-福彩彩票3d怎么玩| www.138412.com-如何反思维买彩票| www.43144.com-福彩山的字迷| www.4700.cn-美的彩票的网址| www.nk07.com-158彩票-| www.bb45.com-河南幸运彩票走势图| www.7250.in-彩虹糖设备-| www.597369.com-壹号平台彩票官网| www.13459.com-360竞猜足彩| www.028105.com-百度彩票下载| www.119444.com-江苏快三能买大小吗| www.214418.com-彩票店怎么开| www.311377.com-极速快三开奖网页| www.425720.com-乐彩网3d下载| www.439263.com-cclcc金彩网| www.551240.com-安徽竞彩快三查询| www.647398.cc-14场足彩贴吧| www.il18.com-澳门足球彩票欧赔| www.01kw.com-七星彩奖池现有余额| www.728983.com-双彩图3d原创图谜| www.870458.com-网上彩票店怎么开| www.968748.com-微信代购彩票| www.zm09.com-赌彩票骗局-| www.240424.com-彩票多买容易中奖| www.526403.com-新快乐8时时彩| www.620186.com-白色釉上彩有毒吗| www.720190.com-北京彩票站招聘| www.810522.com-盈彩彩票钱提不出来| www.887610.com-手机购彩11选5| www.fv44.com-安徽快三计划网页版| www.v74.com-拉萨体育彩票领奖| www.79ki.com-南国今报彩版| www.3883.vip-竞彩分析app| www.77cq.com-周易与彩票预测| www.6187.com-秒速时时彩预测软件| www.220377.com-彩神官网登录| www.071759.com-体育彩票店现状| www.458.live-恒大彩虹镇商铺出售| www.433186.com-c16彩票安卓下载| www.604895.com-澳游彩票-| www.788692.com-古建彩绘图片大全集| www.232733.com-上海快三死规律| www.0684.vip-彩八仙有没有苹果版| www.go66.cc-新疆喜乐彩走势图| www.275828.com-多彩网彩票app| www.512092.com-儿童简单彩铅画教程| www.613667.com-带你买彩票赚钱| www.695670.com-足彩混合投注| www.799187.com-彩票打印机一体机| www.892681.com-瑞彩祥云在哪里下载| 爱购彩票www.355274.com| www.uq26.com-体彩大乐透中奖号码| www.4680.vip-彩票导航网-| www.831025.com-深圳福彩开奖查询| www.964985.com-福彩快三胆码软件| www.cp0928.com-江苏快三破解器下载| www.700036.com-五分时时彩软件下载| www.96362.com-蒲城彩票店转让信息| www.101076.com-快彩网技巧-| www.592812.com-彩虹台节目表| www.626744.com-彩生财论坛-| www.751584.com-彩票折叠了还能兑奖| www.912264.com-洛神体彩店下载| www.wm72.com-凤彩网彩票双色球| www.77775.com-大乐彩今天开奖结果| www.039291.com-大中华彩票可信吗| www.733026.com-淮安中彩票-| www.867858.com-星期三开奖的彩票| www.947975.com-四川体育彩票金七乐| 华彩网www.hcw332.com| www.978614.com-天天中彩票3d| www.1zu.com-手机彩膜市场| www.749228.com-中彩官网赌博| www.862708.com-上海天天彩选4开奖| www.939126.com-彩票如何平刷| www.81ey.com-积分彩票-| www.37832.com-6234彩票网-| www.028677.com-中国彩票地方开奖| www.109186.com-k·h百彩网-| www.467775.com-七乐彩网易彩票| www.pz28.cc-百盈快三靠谱吗| www.679557.com-搜狗彩票下载| www.786293.com-大赢家彩票主页| www.890305.com-胜负彩360-| 大赢家彩票平台www.273215.com| www.126875.com-水彩画天空-| www.77882.cc-智慧彩是什么意思| www.325535.com-手机上玩彩票犯法吗| www.474988.com-金誉彩票手机版下载| www.mx65.com-旺彩社区下载| www.763707.com-摩羯足彩预测app| www.852401.com-七乐彩走势图带线连| www.930798.com-中彩网彩票开奖3d| www.986751.com-竞彩篮球及时比分| www.ck75.com-吉林省体彩网官网| www.vu77.com-彩票k线图分析软件| www.07da.com-彩铅手绘樱花树的人| www.259.cn-三地福彩-| www.7452.vip-彩票走势图游泳| www.53347.com-下载乐彩开奖结果| www.016251.cc-鸿彩下载-| www.084199.com-玩极速快三输了2万| www.246976.com-吉林快三有什么技巧| www.348122.com-七乐彩票是什么| www.448577.com-彩票预测微信公众号| www.525856.com-你蒙古快三-| www.581784.com-每天签到送现彩票金| www.639258.com-上海福彩网点查询| www.699648.com-时时彩群规-| www.203043.com-利奥彩票平台下载| www.296311.com-竞彩足球胆拖稳赚法| www.370544.com-彩宝网彩票| www.861902.com-qq7彩票-| www.941005.com-马耳他瓦莱塔彩票| www.984183.com-杨哥说彩今天| www.vm9.com-马来西亚有什么彩票| www.934588.com-即时彩app-| www.709.site-江西5分彩-| www.9000.xyz-乐彩网站怎么样| www.155636.com-928彩票-| www.440789.com-体彩开奖19042| www.964017.com-福彩三d和直跨度表| www.006758.com-福利彩票3d直播| www.181311.com-竞彩足球app| www.281889.com-复式彩票-| www.457488.com-高频彩有没有漏洞| www.884163.com-玩乐盈彩票输20万| www.ld05.com-河北福彩开奖公告| www.585833.com-江西快三彩票下载| www.19oo.com-彩仙阁挂机软件怎么| www.055331.com-山西快乐十分钟彩票| www.575123.com-彩票大乐透开奖预测| www.690260.com-14场胜负彩走势图| www.816317.com-网络彩票被骗怎么办| www.02yg.com-网购彩票2018| www.39266.cc-下载分分中彩票| www.122946.com-人工计划彩票119| www.479104.com-规模大的足彩| www.611290.com-吉祥彩票平台真的吗| www.13no.com-郑州体彩中一山| www.168627.com-江苏快三怎么玩| www.321446.com-官方高频彩开奖直播| www.519234.com-家彩搜索家彩开奖| www.686522.com-500彩票计划网址| www.835582.com-双色球中彩网500| www.7pj.com-福彩门头源文件| www.250860.com-中福网彩票app| www.381445.com-体彩足彩投注上限| www.595499.com-彩票在哪里开奖| www.443545.com-富赢彩票娱乐| www.670996.com-排列五走势图彩经网| www.941218.com-中国体育彩票机选网| www.qa49.com-132彩票官方软件| www.019259.com-彩票中奖计算器| www.556955.com-购彩堂网站-| www.750046.com-鸿运吧彩票-|