jQuery仿家具商城分類導(dǎo)航banner布局代碼

jQuery仿美樂樂家具商城網(wǎng)站左側(cè)分類導(dǎo)航菜單和寬屏的圖片輪播布局效果代碼。這是一款紅色通用的商城網(wǎng)站分類導(dǎo)航和圖片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;">美規(guī)床</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;">沙發(fā)</a>
										<a href="#">茶幾/邊桌</a>
										<a href="#">電視柜</a>
										<a href="#">鞋柜</a>
										<a href="#">酒柜/裝飾柜</a>
										<a href="#">屏風</a>
										<a href="#">休閑椅/凳</a>
										<a href="#">間廳/玄關(guān)柜</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="#">書椅/轉(zhuǎn)椅</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;">辦公沙發(fā)</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="#">沙發(fā)</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="#">衛(wèi)浴</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">
	//左側(cè)分類導(dǎo)航
	$('.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. 會員在本站下載的原創(chuàng)商用和VIP素材后，只擁有使用權(quán)，著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材，未經(jīng)合法授權(quán)，請勿用于商業(yè)用途，會員不得以任何形式發(fā)布、傳播、復(fù)制、轉(zhuǎn)售該素材，否則一律封號處理。
4. 本平臺織夢模板僅展示和個人非盈利用途，織夢系統(tǒng)商業(yè)用途請預(yù)先授權(quán)。

查看演示下載資源

0 13478 57

軟件 Dreamweaver
格式 HTML
作者迷茫
版權(quán) ? 原創(chuàng)商用（獨家） i

版權(quán)聲明

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

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

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