QQ客服
當前位置 : 中国福彩快乐十分开奖分布图 > 代碼 > 網頁特效 > 導航菜單 > jQuery仿家具商城分類導航banner布局代碼

詹天佑双色球2019022期分布图: VIP商用 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天

知道了