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.185411.com-时时彩1分快3网站| www.268921.com-彩票争霸2app| www.390660.com-网赌彩票输了| www.723530.com-镇江体彩中心地址| www.141161.com-老猫研彩的微博| 网易彩票www.26163h.com| www.sp35.com-610彩票官网| www.37vl.com-福彩17500开奖| www.7672.xyz-彩票软件犯罪| www.79703.com-福彩已亥猪一等奖| www.122327.com-瑞彩国际-| www.238339.com-下载手机买彩票软件| www.598510.com-19021七星彩| www.339428.com-今日福彩奖号| www.573448.com-怎样绘制彩票k线图| www.902094.com-360购彩导航| www.cp688.com-大发快三-| www.qf16.com-彩票77app-| www.298522.com-大发时时彩每天计划| www.333281.com-玩彩秘诀-| www.911405.com-东方三分彩是哪里的| www.o81.cn-服务店铺彩票| www.3877.cm-竞彩足球场次| www.343305.com-网上购买福利彩票| www.521565.com-体育彩票去哪里好玩| www.618638.com-中国福彩消宝石玩法| www.691616.com-彩乐乐打不开网| www.805368.com-重庆时时彩每年停售| www.898073.com-彩票代理拉人骗局| www.3393.mobi-18k彩金戒指| www.43724.com-苹果6plus彩膜| www.53686.com-时时彩开庄机器人| www.99353.com-结婚什么时候谈彩礼| www.494268.com-竞彩实单2串一推荐| www.85368.cc-3个数的彩票| www.090096.com-中国福彩网代理| www.235221.com-体彩竞彩加微信| www.525318.com-搜索58彩开奖| www.357886.com-大乐透彩票开奖等级| www.96167.com-南阳市结婚彩礼| www.77315.cc-彩店宝软件下载官网| www.070560.com-365彩票软件下载| www.33497.com-福彩61生肖| www.781308.com-同志微彩投资骗局| www.871404.com-福彩d排三开奖结果| www.487080.com-足彩截止购买时间| www.576054.com-v8彩票ios网址| www.654774.com-时时彩后三有多少组| www.734797.com-三合开彩-| www.805287.com-七乐彩奖励有多少| www.878742.com-怎么玩大乐透彩票| www.947682.com-支付宝积分兑换彩票| 大赢家彩票平台www.215602.com| www.qp17.cc-分分快三技巧概率| www.842603.com-佬牛足彩新浪博客| www.911327.com-民彩网安全吗| www.973746.com-彩票代理日结佣金| www.aa7.cc-北京快三大小怎么看| www.9506.vip-彩票极速-| www.120208.com-足彩即时比分新浪| www.326767.com-彩票几位数如何中奖| www.448673.com-大乐透一等奖彩票图| www.758202.com-高盛官网彩票| www.603552.com-山西彩服务正规么| www.681970.com-微信彩票下载| www.769389.com-大玩家彩票兑换规则| www.854205.com-最新竞彩258下载| www.955452.com-彩票主任-| www.as54.com-广西快三跨度走势图| www.t56.cn-够彩大厅网址| www.830225.com-如何破解王牌彩票网| www.909790.com-乐彩11选5-| www.971233.com-彩c16app-| www.cai363.com-快三福彩网站| www.nw13.com-中国福彩网开奖查询| www.126306.com-福利彩票中奖率很低| www.226915.com-彩客网完整比分| www.303366.com-七彩链接-| www.369904.com-123会员彩票官网| www.44gf.com-足彩竞彩新浪博客| www.910.tv-大学生彩票事件| www.4273.biz-福彩3d老虎图| www.881415.com-一定牛竞彩推荐| www.961925.com-福彩双色球兑奖说明| 9号彩票www.80767x.com| www.626705.com-体彩双彩论坛试机号| www.714922.com-彩1彩票app-| www.791125.com-甘肃快三走势图明天| www.867606.com-谁有彩票代打兼职| www.927215.com-凤凰彩票全天计划| www.984064.com-杀姐姐看彩p3| www.le75.com-河北冀彩宝下载| www.30603.com-666彩票下载安装| www.268506.com-竞彩猫好彩频道| www.344172.com-163彩票网网站| www.432357.com-体彩领奖到哪里领取| www.531273.com-艾彩原创视频| www.607720.com-彩铅画花画作品| www.35ko.com-46彩-| www.hw1.com-什么叫彩票屠龙计划| www.887315.com-芒果彩票是不是骗局| www.950774.com-彩运8平台真的吗| www.993555.com-淘宝彩票下载软件| www.qo2.cc-松原体彩中心网站| www.396291.com-福彩中心放假安排| www.633895.com-一分快三修改器下载| www.58820.com-菠萝彩微尔算法| www.zs02.com-穆棱七彩国际影城| www.e30.blue-乐和彩关了-| www.908220.com-七乐彩开奖出球顺序| www.71qs.com-彩票几点开奖大乐透| www.042505.com-卖彩票的广告词| www.148068.com-体彩大赢家app| www.229494.cc-7彩冰淇淋-| www.305825.com-558彩票app-| www.395063.com-彩虹代刷app制作| www.503198.com-鸿彩网注册邀请码| www.518127.com-福利彩票中奖了事件| www.988656.com-下载期期彩-| www.233879.com-湖北快三中奖规则| www.ql44.com-立彩app下载| www.066913.com-线上博彩靠谱| www.142727.com-官网彩8彩票| www.777703.com-杏彩娱乐登录| www.861191.com-广东好彩1在哪买| www.921353.com-彩神l网址-| www.983651.com-足球竞彩外围app| www.cai5166.com快三彩经网走势图| www.pb97.com-三分快三怎么看走势| www.r97.cn-江苏快三下期推荐号| www.159145.com-无锡福彩网-| www.513214.com-官方售彩网站| www.028198.com-彩票计划软件公式| www.em33.com-福彩手机助手| www.pt.com-海南快2彩票规则| www.0762.pro-七星彩解梦码册| www.164425.com-彩票新闻故事| www.326605.com-寒若冰七星彩开奖| www.827328.com-球霸彩票-| www.67704.com-手机上买彩票赌行吗| www.8188.tv-彩中堂挂牌-| www.217822.com-海南五星彩开奖号码| www.807888.cc-916彩票-| www.ck81.com-合肥快三遗漏数据| www.667336.com-打彩球小游戏大全| www.pn59.com-湖北快三未出号查询| www.51633.cc-好运彩彩票快三| www.191848.com-幸运一分快三走势图| www.754608.com-六e彩票-| www.863830.com-1233彩票版本| www.963529.com-被彩票托骗了怎么办| www.ua40.com-体育彩票术语| www.59955.cc-百彩影视-| www.34402.com-上海福彩快三开奖查| www.xy08.com-d9cc彩票app| www.30mg.com-高哲色彩头像| www.654961.com-彩票下载软件| www.362122.com-儿童赞美诗歌彩虹| www.565644.com-福彩3d图谜第五版| www.672990.com-星期一有什么彩票| www.28793.cc-彩快彩王网址| www.028292.com-彩之王下载安装| www.cp074.com-安微快三综合走势图| 大赢家彩票www.374311.com|