jQuery電商導(dǎo)航熱門(mén)分類(lèi)布局

使用方法：

1、head引入css文件

<link type="text/css" href="css/style.css" rel="stylesheet" />

2、head引入js文件

<script type="text/javascript" src="js/jquery.min.js"></script>

3、body引入部分

<!--左側(cè)菜單-->
<div class="sec-mainL left">
	<div class="mainL-hd-box">
		<h2 class="mainL-hd"><a href="#">購(gòu)物返彩貝商家</a></h2>
	</div>
	<!--菜單列表-->
	<ul class="sec-mainNav">
		<li>
			<h3>數(shù)碼家電</h3>
			<div class="menu-tab">
				<a href="">京東</a>
				<a href="">易迅</a>
				<a href="">蘇寧易購(gòu)</a>
				<div class="fix"></div>
			</div>
			<span class="menu-more">更多</span>
			<!--二級(jí)菜單-->
			<div class="menu-panel">
				<div class="menu-panel-hd">
					<h4>熱門(mén)分類(lèi)</h4>
					<div class="sub-group">
						<a href="">京東</a>
						<a href="">易迅</a>
						<a href="">蘇寧易購(gòu)</a>
						<a href="">新蛋商城</a>
						<a href="">手機(jī)數(shù)碼</a>
						<a href="">攝像影音</a>
						<a href="">耳麥音響</a>
						<a href="">國(guó)美在線</a>
					</div>
				</div>
				<div class="menu-panel-bd">
					<ul>
						<li>
							<a href=""><img src="img/0.png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0 (1).png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0 (2).png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0 (3).png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0.jpg" /></a>
						</li>
					</ul>
				</div>
				<a href="" class="menu-panel-btn">
					<span>查看全部商家</span>
					<em></em>
				</a>
			</div>
		</li>
		<li>
			<h3>食品酒水</h3>
			<div class="menu-tab">
				<a href="">美食特產(chǎn)</a>
				<a href="">酒水茶葉</a>
				<a href="">蛋糕預(yù)訂</a>
				<div class="fix"></div>
			</div>
			<span class="menu-more">更多</span>
			<!--二級(jí)菜單-->
			<div class="menu-panel">
				<div class="menu-panel-hd">
					<h4>熱門(mén)分類(lèi)</h4>
					<div class="sub-group">
						<a href="">美食特產(chǎn)</a>
						<a href="">酒水茶葉</a>
						<a href="">蛋糕預(yù)訂</a>
					</div>
				</div>
				<div class="menu-panel-bd">
					<ul>
						<li>
							<a href=""><img src="img/0.png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0 (1).png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0 (2).png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0 (3).png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0.jpg" /></a>
						</li>
					</ul>
				</div>
				<a href="" class="menu-panel-btn">
					<span>查看全部商家</span>
					<em></em>
				</a>
			</div>
		</li>
		<li>
			<h3>商旅出行</h3>
			<div class="menu-tab">
				<a href="">酒店預(yù)訂</a>
				<a href="">機(jī)票預(yù)訂</a>
				<a href="">商旅綜合</a>
				<div class="fix"></div>
			</div>
			<span class="menu-more">更多</span>
			<!--二級(jí)菜單-->
			<div class="menu-panel">
				<div class="menu-panel-hd">
					<h4>熱門(mén)分類(lèi)</h4>
					<div class="sub-group">
						<a href="">酒店預(yù)訂</a>
						<a href="">機(jī)票預(yù)訂</a>
						<a href="">商旅綜合</a>
						<a href="">度假預(yù)訂</a>
						<a href="">火車(chē)票預(yù)訂</a>
					</div>
				</div>
				<div class="menu-panel-bd">
					<ul>
						<li>
							<a href=""><img src="img/0.png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0 (1).png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0 (2).png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0 (3).png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0.jpg" /></a>
						</li>
					</ul>
				</div>
				<a href="" class="menu-panel-btn">
					<span>查看全部商家</span>
					<em></em>
				</a>
			</div>
		</li>
		<li>
			<h3>日用百貨</h3>
			<div class="menu-tab">
				<a href="">飛飛商城</a>
				<a href="">圖書(shū)教育</a>
				<a href="">百貨</a>
				<div class="fix"></div>
			</div>
			<span class="menu-more">更多</span>
			<!--二級(jí)菜單-->
			<div class="menu-panel">
				<div class="menu-panel-hd">
					<h4>熱門(mén)分類(lèi)</h4>
					<div class="sub-group">
						<a href="">飛飛商城</a>
						<a href="">圖書(shū)教育</a>
						<a href="">百貨</a>
						<a href="">家紡家具</a>
					</div>
				</div>
				<div class="menu-panel-bd">
					<ul>
						<li>
							<a href=""><img src="img/0.png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0 (1).png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0 (2).png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0 (3).png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0.jpg" /></a>
						</li>
					</ul>
				</div>
				<a href="" class="menu-panel-btn">
					<span>查看全部商家</span>
					<em></em>
				</a>
			</div>
		</li>
		<li>
			<h3>男女服裝</h3>
			<div class="menu-tab">
				<a href="">時(shí)尚女裝</a>
				<a href="">精品男裝</a>
				<a href="">男女內(nèi)衣</a>
				<div class="fix"></div>
			</div>
			<span class="menu-more">更多</span>
			<!--二級(jí)菜單-->
			<div class="menu-panel">
				<div class="menu-panel-hd">
					<h4>熱門(mén)分類(lèi)</h4>
					<div class="sub-group">
						<a href="">時(shí)尚女裝</a>
						<a href="">精品男裝</a>
						<a href="">男女內(nèi)衣</a>
						<a href="">綜合商城</a>
						<a href="">限時(shí)特賣(mài)</a>
						<a href="">淘寶品牌</a>
						<a href="">休閑服飾</a>
						<a href="">運(yùn)動(dòng)戶外</a>
					</div>
				</div>
				<div class="menu-panel-bd">
					<ul>
						<li>
							<a href=""><img src="img/0.png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0 (1).png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0 (2).png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0 (3).png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0.jpg" /></a>
						</li>
					</ul>
				</div>
				<a href="" class="menu-panel-btn">
					<span>查看全部商家</span>
					<em></em>
				</a>
			</div>
		</li>
		<li>
			<h3>鞋包配飾</h3>
			<div class="menu-tab">
				<a href="">潮流女鞋</a>
				<a href="">商務(wù)男鞋</a>
				<a href="">時(shí)尚包包</a>
				<div class="fix"></div>
			</div>
			<span class="menu-more">更多</span>
			<!--二級(jí)菜單-->
			<div class="menu-panel">
				<div class="menu-panel-hd">
					<h4>熱門(mén)分類(lèi)</h4>
					<div class="sub-group">
						<a href="">潮流女鞋</a>
						<a href="">商務(wù)男鞋 </a>
						<a href="">時(shí)尚包包</a>
						<a href="">運(yùn)動(dòng)休閑</a>
						<a href="">珠寶首飾</a>
						<a href="">經(jīng)典腕表</a>
						<a href="">戶外生活</a>
						<a href="">奢侈品</a>
					</div>
				</div>
				<div class="menu-panel-bd">
					<ul>
						<li>
							<a href=""><img src="img/0.png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0 (1).png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0 (2).png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0 (3).png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0.jpg" /></a>
						</li>
					</ul>
				</div>
				<a href="" class="menu-panel-btn">
					<span>查看全部商家</span>
					<em></em>
				</a>
			</div>
		</li>
		<li>
			<h3>美容美妝</h3>
			<div class="menu-tab">
				<a href="">天天網(wǎng)</a>
				<a href="">美妝商城</a>
				<a href="">眼鏡美瞳</a>
				<div class="fix"></div>
			</div>
			<span class="menu-more">更多</span>
			<!--二級(jí)菜單-->
			<div class="menu-panel">
				<div class="menu-panel-hd">
					<h4>熱門(mén)分類(lèi)</h4>
					<div class="sub-group">
						<a href="">天天網(wǎng)</a>
						<a href="">美妝商城</a>
						<a href="">眼鏡美瞳</a>
						<a href="">品牌商城</a>
					</div>
				</div>
				<div class="menu-panel-bd">
					<ul>
						<li>
							<a href=""><img src="img/0.png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0 (1).png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0 (2).png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0 (3).png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0.jpg" /></a>
						</li>
					</ul>
				</div>
				<a href="" class="menu-panel-btn">
					<span>查看全部商家</span>
					<em></em>
				</a>
			</div>
		</li>
		<li>
			<h3>母嬰保健</h3>
			<div class="menu-tab">
				<a href="">壹藥網(wǎng)</a>
				<a href="">康愛(ài)多</a>
				<a href="">醫(yī)藥保健</a>
				<div class="fix"></div>
			</div>
			<span class="menu-more">更多</span>
			<!--二級(jí)菜單-->
			<div class="menu-panel">
				<div class="menu-panel-hd">
					<h4>熱門(mén)分類(lèi)</h4>
					<div class="sub-group">
						<a href="">壹藥網(wǎng)</a>
						<a href="">康愛(ài)多</a>
						<a href="">醫(yī)藥保健</a>
						<a href="">成人用品</a>
						<a href="">母嬰商城</a>
					</div>
				</div>
				<div class="menu-panel-bd">
					<ul>
						<li>
							<a href=""><img src="img/0.png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0 (1).png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0 (2).png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0 (3).png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0.jpg" /></a>
						</li>
					</ul>
				</div>
				<a href="" class="menu-panel-btn">
					<span>查看全部商家</span>
					<em></em>
				</a>
			</div>
		</li>
		<li>
			<h3>娛樂(lè)生活</h3>
			<div class="menu-tab">
				<a href="">游戲</a>
				<a href="">彩貝</a>
				<a href="">演出票務(wù)</a>
				<div class="fix"></div>
			</div>
			<span class="menu-more">更多</span>
			<!--二級(jí)菜單-->
			<div class="menu-panel">
				<div class="menu-panel-hd">
					<h4>熱門(mén)分類(lèi)</h4>
					<div class="sub-group">
						<a href="">游戲</a>
						<a href="">彩貝</a>
						<a href="">演出票務(wù)</a>
						<a href="">線上沖印</a>
						<a href="">生活服務(wù)</a>
					</div>
				</div>
				<div class="menu-panel-bd">
					<ul>
						<li>
							<a href=""><img src="img/0.png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0 (1).png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0 (2).png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0 (3).png" /></a>
						</li>
						<li>
							<a href=""><img src="img/0.jpg" /></a>
						</li>
					</ul>
				</div>
				<a href="" class="menu-panel-btn">
					<span>查看全部商家</span>
					<em></em>
				</a>
			</div>
		</li>
	</ul>
</div>

<script type="text/javascript">
$(function() {
	var $top = $('.sec-mainNav').offset().top + $('.sec-mainNav').height()
	//左側(cè)導(dǎo)航動(dòng)畫(huà)
	$('.sec-mainNav li').on('mouseenter', function() {
		var $height = $(this).offset().top + $(this).find('.menu-panel').outerHeight();
		$(this).find('.menu-panel').show();
		if($height - $top >= 0) {
			$(this).find('.menu-panel').css({
				top: -($height - $top) + 'px'
			})
		}
	});
	$('.sec-mainNav li').on('mouseleave', function() {
		$(this).find('.menu-panel').hide();
	});
});
</script>