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.517180.com-3d中彩网站-| www.oq23.com-盈彩-| www.9955.cm-彩票头奖-| www.74ve.com-体彩大乐透要怎么买| www.079675.com-有没有5位数的彩票| www.039996.com-鸿彩快三下载| www.617598.com-怀化市福彩兑奖地址| www.82xu.com-多彩网字谜专区| www.353938.com-足球彩票直播| www.467979.com-彩迷网福彩3d| www.585408.com-白菜送彩金-| www.679782.com-彩神iv8-| www.788106.com-网易彩票足球推荐| www.906225.com-吉林快三庄家骗局| www.978456.com-彩色沥青价格| www.tf.com-天津快三官方网站| www.6611.date-彩588.com-| www.4ty.com-怎么样才中彩票| www.0771.pw-网上官方购彩软件| www.215927.com-七乐彩中奖规则查询| www.8773.live-足彩人工智能分析| www.128396.com-快三和值三个数相加| www.278115.com-安徽体育彩票官网| www.097054.com-牛彩彩摘网-| www.gk0.com-时时彩中奖规则表| www.044070.com-3d彩民乐钱图今天| www.433103.com-彩票大人-| www.540049.com-快三讲解分解教学| www.560275.com-彩票收米是什么意思| www.686499.com-5oo彩票app-| www.781334.com-微彩吧靠谱吗| www.969468.com-酷彩吧彩票官网| www.bq5.cc-彩神vll下载| www.qa29.com-盈彩注册-| www.044188.com-致富彩抢红包| www.663766.com-体彩篮球竞赛结果| www.578345.com-体彩店装修流程| www.688095.com-天天中彩票历史版本| www.779344.com-菠萝彩微尔算法| www.857841.com-盈彩网怎样选号| www.927835.com-掌信彩app-| www.ba97.com-淘宝彩票app下载| www.t72.club-118娱乐彩票| www.1456.org-复杂彩铅画大全| www.6551.top-快三长龙有规律嘛| www.344494.com-时时彩微信交流群| www.166694.com-福彩快三骗局| www.237843.com-快三推广的话| www.891033.com-至尊彩首页-| www.995709.com-足彩最多能买多少| www.fv26.com-彩票手机客户端下载| www.12dl.com-极速彩788-| www.95hx.com-泰彩彩票-| www.207806.com-49彩票官网-| www.891572.com-彩票推销文案| www.991178.com-可乐彩票官网| www.jy57.com-七星彩开奖玩法说明| www.x10.com-大发时时彩邀请码| www.0510.com-正彩彩票娱乐| www.362740.com-彩票缺个角有效吗| www.9243.biz-彩票分析师证哪有| www.43835.com-红彩网app卖b的| www.177148.com-官方一分快三| www.280496.com-计划网时时彩全天| www.415699.com-红树林彩票注册| www.531217.com-彩票数字组合公式| www.620303.com-澳客体彩苹果下载| www.709053.com-关于17彩票-| www.793102.com-江苏彩票在哪里兑奖| www.948022.com-体育彩票篮球竞彩网| www.cai9422.com贵州体彩兑奖地点| www.660417.com-完美彩票安卓| www.242008.com-新浪彩票下载安装| www.253299.com-甘肃好彩快三| www.160006.com-福彩3d乐彩首页| www.30488.cc-大连体育彩票机出售| www.59wc.com-七星彩遗漏分析| www.92rs.com-天游分分彩挂机软件| www.149022.com-心率快三最大遗漏| www.473656.com-体彩排三中奖号多少| www.157932.com-竞彩足球ios版| www.025800.com-新浪彩票网电脑版| www.590103.com-足彩投注量查询| www.089812.com-彩票代理平台微信| www.22kw.com-app8-88彩金| www.097900.com-3d福利彩票查洵| www.60235.com-如何做彩票数据分析| www.603803.com-足彩大数据分析软件| www.776370.com-福利彩票战-| www.625860.com-三分彩吧-| www.587120.com-彩票倍投盈利| www.708014.com-超级彩票是什么| www.804120.com-45111彩民论坛| www.vi52.com-江苏快三遗漏顺序| www.8440.vip-买彩票会赔吗| www.3109.vip-500彩票合法么| www.55783.com-七乐彩5拖7多少钱| www.055723.com-福利彩票几位数| www.79vu.com-福彩3d怎么学| www.132767.com-哪种彩票app好| www.365978.cc-重播更多精彩视频| www.540350.com-境外足彩-| www.602107.com-彩票逃跑-| www.666277.com-航天彩虹公司| www.36718.cc-澳门高频彩票| www.019122.com-彩票开奖3d之家| www.308304.com-体彩第19050期| www.459228.com-竞彩3串4怎么买| www.544425.com-易彩网怎么找不到了| www.n11.wang-福彩陕西快乐十分| www.153.gg-彩虹天堂听哭了| www.243796.com-马会彩票网站| www.318538.com-福彩双色球字谜总汇| www.373908.com-鸿利彩网app| www.520525.com-正规足彩怎么网上买| www.628234.com-赢家彩票骗局| www.055490.com-新浪体彩开奖视频| www.13qb.com-河南彩票大奖得主| www.130692.com-快彩论坛-| www.028477.com-快三大小单双的规律| www.265370.com-福彩3d最新书籍| www.735553.com-体彩扑克三-| www.838121.com-高级的彩票平台源码| www.950256.com-金狮彩票是不是真的| www.83283.com-真正彩票高手是| www.130979.com-河南平舆定亲和彩礼| www.776508.com-重庆时时彩五星玩法| www.277859.com-福彩大发一分钟快3| www.877951.com-极速快三计划免费版| www.985408.com-足彩猜胜负中奖规则| www.gk38.com-下载快三图表| www.5zx.cc-上海众盈彩票娱乐| www.68rb.com-福彩三地太湖谜语| www.75395.cc-风云彩票精华a版| www.522556.com-时时彩公式0369| www.5509.me-博金彩票-| www.nj76.com-竞彩网开奖-| www.383996.com-88彩票网是真是假| www.wq11.com-中彩网客户端下载| www.66394.com-京东如何投彩票| www.tf56.com-彩票外围网站哪个好| www.582253.com-双色球彩票凤彩网谜| www.71sc.com-浙江大彩鲸11选五| www.098634.com-福彩在线怎么玩| www.52383.cc-天猫彩票吧-| www.732996.com-百乐彩娱乐官网| www.964484.com-彩票旗舰网论坛| www.im20.com-福彩3d群-| www.744779.com-类似于彩6的平台| www.819378.com-竞彩让球欧赔分析| www.889601.com-七乐彩票代理真假| www.953462.com-牛牛彩票网官网| 网易彩票www.064wy.com| www.5315.in-67彩官网-| www.31331.cc-体彩预测专家预测| www.096081.com-天下彩免费正版资料| www.176189.com-彩票平台新人送彩金| www.250798.com-全能中彩彩票官方| www.373913.com-沈阳体彩12-| www.lj12.com-2020彩票下载| www.958394.com-彩导航鸿运-| www.998929.com-彩票头条新闻| www.ko5.cc-吉林快三返水| www.718332.com-mv羽泉彩虹-|