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.66376o.com| www.092193.com-吉林快三97群| www.218901.com-信博彩票是真是假| www.313976.com-唯彩会专家预测号码| www.402040.com-足彩欧亚指数解读| www.523439.com-幸运中福彩下载| www.625859.com-趣九购老彩票微信群| www.731497.com-易彩网注册邀请码| www.818124.com-胜负彩19024| www.903620.com-3d福彩字谜画迷| www.975484.com-河北福彩网首页| www.1zd.com-a3彩色打印机价格| www.88gn.com-体彩大透开奖| www.4211.org-七彩国旅-| www.16314.com-彩客网官方下载| 丰彩娱乐www.fcyl3.com| www.866.site-时时彩永赚不亏方法| www.503133.com-云南昆明体育彩票| www.215015.com-大家赢彩票-| www.57116.com-福彩自助机-| www.095058.com-福利3d彩票怎么买| www.163445.com-体彩种类介绍| www.719563.com-中彩吧合法嘛| www.813911.com-刘军教玩江苏快三| www.900060.cc-657彩票备用网址| www.972371.com-福彩三弟开奖号| www.cai9200.com河北省福利彩票快三| www.480.cn-时时彩任三混选技巧| www.34yx.com-上海彩民中奖| www.272.cx-中国福彩官网中心| www.40yg.com-体彩大乐透几号放假| www.0269.cm-彩票开奖电视频道| www.61786.com-3d彩票字谜今天| www.20rn.com-抓包修改时时彩数据| www.5859.in-彩票黑客预测| www.34015.com-玩儿彩票能挣钱吗| www.826979.com-神彩网论坛-| www.sp58.com-新彊福利彩票网| www.529555.com-大象彩票官网| www.395910.com-什么彩票星期六开奖| www.050336.com-手机qq怎么买彩票| 天玺彩票www.236380.com| www.980739.com-火箭彩票app链接| www.d32.hk-最准彩票预测软件| www.75xi.com-竞彩改革-| www.653759.com-澳门彩票可以买吗| www.789540.com-竞彩保本对冲| www.918757.com-博彩app推荐下| www.xj93.cc-双彩论坛3d字谜| www.122115.com-希腊时时彩软件| www.405338.com-内蒙快三开奖情况| www.719108.com-彩虹的变化过程| www.286722.com-江苏快三今天走势图| www.505135.com-中王王彩票开| www.615533.com-体彩6十1选号方法| www.811998.com-亮彩家具-| www.fy61.com-破解彩票-| www.97js.cc-踩台和彩排-| www.915850.com-八号彩票下载安装| 中国福利彩票www.34788g.com| www.247955.com-体彩和福彩哪个更假| www.447966.com-万字软件万能大马彩| www.698947.com-彩铅零食-| 如意彩票www.565516.com| www.866207.com-腾讯分分彩官方网站| 华夏彩票www.hx1111.com| www.190333.com-一分快三走势怎么看| www.266250.com-河北体彩官网| www.34776.com-彩票刷单是真的吗| www.062320.com-七天彩票骗局| www.59ni.com-山东群英会彩乐乐| www.234977.com-下载福利彩票软件| www.336761.cc-中彩网开奖结果| www.093083.com-彩钢围档-| www.0484.website大连体彩网站| www.786373.com-搜狐福彩体彩天霁| www.t68.top-福彩藏机图今天图| www.2474.cm-足彩竞猜奖金计算器| www.301556.com-昨天彩票开奖号| www.287376.com-99购十分彩合法吗| www.359296.com-彩票几点开始买| www.069600.com-神彩网高手榜| www.241734.com-七星彩玩法中奖说明| www.441384.com-七星彩梦册查奖| www.620044.com-体育彩票竞彩微信群| www.815605.com-福彩排列五的玩法| www.kl98.com-时分彩票-| www.77hr.com-酷彩吧app苹果版| www.7444.top-彩票开店限制| www.81814.com-中彩票的命-| www.153269.com-安徽福彩快3直播| www.282243.com-重庆五分彩开彩结果| www.33631.cc-专家说彩网-| www.715.live-重庆时时彩定胆杀码| www.023244.com-体彩官网哪家卖得好| www.540795.com-993彩票下载| www.21bu.cc-福利彩票电视哪个台| www.224414.com-福彩自助快三北京| www.305092.com-福彩3d今天开奖吗| www.371720.com-大发快三计算技巧| www.f48.com-乐彩网预测靠谱吗| www.45im.com-彩红是什么颜色| www.512.in-今日彩票吉祥数字| www.306072.com-苏州福彩快三| www.9698.bid-好彩高手论坛| www.189697.com-河南快三今日遗漏| www.344048.com-qq群里面玩快三| www.112203.com-快三和值连号| www.237646.com-竞猜足彩胜平负| www.923288.com-深圳体彩店转让更新| www.ms57.com-打开中彩网首页| www.42nb.com-寸时彩宝典下载| www.362807.com-彩虹实验光的变化| www.79703.com-福彩已亥猪一等奖| www.704141.com-裙彩35查询-| www.804126.com-会员登录王者彩票| www.917066.com-彩票33群-| www.974565.com-众彩是什么平台| www.cp842.com-幸运快三是不是真的| www.04vk.com-彩铅动漫人物画图片| www.73pd.com-彩票现场开奖直播| www.2216.vip-福彩断组牛材网| www.2go.com-网易不能买彩票了| www.930077.com-福利彩票中奖等级| 大奖彩票www.88djcp.com| www.qh11.com-好彩四味爆珠| www.25te.com-今天福利彩票图片| www.1532.vip-湖北福彩投注| www.872320.com-贵阳市体育彩票中心| www.871996.com-福利彩票双色球74| www.938041.com-双赢彩票平台可靠吗| www.985146.com-728彩票怎么没了| www.eb68.com-彩票平台app下载| www.14ev.com-体彩七星彩结果| www.891087.com-大发快三在哪买| www.981605.com-中国福彩真实性| www.ez0.com-快三胆拖复式表| www.950802.com-齐鲁风采七乐彩玩法| www.998284.com-中国正规彩票有哪些| www.ag27.com-福利彩票啥时候开奖| www.344400.com-彩神怎么做代理| www.fs3.cc-地下重庆时时彩| www.6873.biz-爱彩人彩票网下载| www.53956.cc-彩票平台输-| www.671445.com-p3彩宝网试机号| www.777670.com-166cp彩票-| www.054439.cc-吉林快三遗漏预测| www.nv82.com-玩彩票算赌博罪吗| www.75600.com-老猫看彩怎么关注| www.683822.com-乐八彩app-| www.760831.com-手机彩票网高频| www.836938.com-福利彩票快乐彩技巧| www.921247.com-快彩在线邀请码| www.ib80.com-安徽省体彩中心地址| www.a04.cc-新浪爱彩合法吗| www.449282.com-玩分分彩诀窍| www.541906.com-足彩即时比分奥客| www.5824.cm-7彩网用户注册| www.558331.com-足彩任选九贴吧| www.63936.com-19038期胜负彩| www.05268.cc-所有彩票平台| www.368166.com-刚力彩芽演唱会| www.815315.com-秒秒彩破解-| www.909595.com-九宫预测时时彩|