jQuery仿家具商城分類導航banner布局代碼

jQuery仿美樂樂家具商城網站左側分類導航菜單和寬屏的圖片輪播布局效果代碼。這是一款紅色通用的商城網站分類導航和圖片banner頂部布局樣式代碼。

使用方法：

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>

使用聲明

1. 本站所有素材（未指定商用），僅限學習交流。
2. 會員在本站下載的原創商用和VIP素材后，只擁有使用權，著作權歸原作者及17素材網所有。
3. 原創商用和VIP素材，未經合法授權，請勿用于商業用途，會員不得以任何形式發布、傳播、復制、轉售該素材，否則一律封號處理。
4. 本平臺織夢模板僅展示和個人非盈利用途，織夢系統商業用途請預先授權。

查看演示下載資源

0 14181 57

軟件 Dreamweaver
格式 HTML
作者迷茫
版權 ? 原創商用（獨家） i

版權聲明

此作品是由17素材網簽約用戶上傳，17素材網擁有版權；未經17素材網書面授權，請勿作他用。人物肖像，字體及音頻如需商用需第三方額外授權；

17素材網尊重知識產權，如知識產權權利人認為平臺內容涉嫌侵權，可通過郵件：3264130392@qq.com提出書面通知，我們將及時處理。

網站提供的黨政主題相關內容（國旗、國徽、黨徽...），目的在于配合國家政策宣傳，僅限個人學習分享使用，禁止用于任何廣告和商用目的。