jQuery电商导航热门分类布局

jQuery电商导航热门分类布局

收藏
jQuery电商导航热门分类布局
jQuery制作红色常用的商城网站左侧导航悬停显示热门分类和全部商家品牌布局代码。这是一款综合生活购物网站导航div布局。
  • 软件 Dreamweaver
  • 格式 HTML
  • 作者 小喵喵
  • 上传时间 6年前

使用方法:

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引入部分

<!--左侧菜单-->
<div class="sec-mainL left">
	<div class="mainL-hd-box">
		<h2 class="mainL-hd"><a href="#">购物返彩贝商家</a></h2>
	</div>
	<!--菜单列表-->
	<ul class="sec-mainNav">
		<li>
			<h3>数码家电</h3>
			<div class="menu-tab">
				<a href="">京东</a>
				<a href="">易迅</a>
				<a href="">苏宁易购</a>
				<div class="fix"></div>
			</div>
			<span class="menu-more">更多</span>
			<!--二级菜单-->
			<div class="menu-panel">
				<div class="menu-panel-hd">
					<h4>热门分类</h4>
					<div class="sub-group">
						<a href="">京东</a>
						<a href="">易迅</a>
						<a href="">苏宁易购</a>
						<a href="">新蛋商城</a>
						<a href="">手机数码</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="">美食特产</a>
				<a href="">酒水茶叶</a>
				<a href="">蛋糕预订</a>
				<div class="fix"></div>
			</div>
			<span class="menu-more">更多</span>
			<!--二级菜单-->
			<div class="menu-panel">
				<div class="menu-panel-hd">
					<h4>热门分类</h4>
					<div class="sub-group">
						<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="">酒店预订</a>
				<a href="">机票预订</a>
				<a href="">商旅综合</a>
				<div class="fix"></div>
			</div>
			<span class="menu-more">更多</span>
			<!--二级菜单-->
			<div class="menu-panel">
				<div class="menu-panel-hd">
					<h4>热门分类</h4>
					<div class="sub-group">
						<a href="">酒店预订</a>
						<a href="">机票预订</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="">飞飞商城</a>
				<a href="">图书教育</a>
				<a href="">百货</a>
				<div class="fix"></div>
			</div>
			<span class="menu-more">更多</span>
			<!--二级菜单-->
			<div class="menu-panel">
				<div class="menu-panel-hd">
					<h4>热门分类</h4>
					<div class="sub-group">
						<a href="">飞飞商城</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="">时尚女装</a>
				<a href="">精品男装</a>
				<a href="">男女内衣</a>
				<div class="fix"></div>
			</div>
			<span class="menu-more">更多</span>
			<!--二级菜单-->
			<div class="menu-panel">
				<div class="menu-panel-hd">
					<h4>热门分类</h4>
					<div class="sub-group">
						<a href="">时尚女装</a>
						<a href="">精品男装</a>
						<a href="">男女内衣</a>
						<a href="">综合商城</a>
						<a href="">限时特卖</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="">潮流女鞋</a>
				<a href="">商务男鞋</a>
				<a href="">时尚包包</a>
				<div class="fix"></div>
			</div>
			<span class="menu-more">更多</span>
			<!--二级菜单-->
			<div class="menu-panel">
				<div class="menu-panel-hd">
					<h4>热门分类</h4>
					<div class="sub-group">
						<a href="">潮流女鞋</a>
						<a href="">商务男鞋 </a>
						<a href="">时尚包包</a>
						<a href="">运动休闲</a>
						<a href="">珠宝首饰</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="">天天网</a>
				<a href="">美妆商城</a>
				<a href="">眼镜美瞳</a>
				<div class="fix"></div>
			</div>
			<span class="menu-more">更多</span>
			<!--二级菜单-->
			<div class="menu-panel">
				<div class="menu-panel-hd">
					<h4>热门分类</h4>
					<div class="sub-group">
						<a href="">天天网</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="">壹药网</a>
				<a href="">康爱多</a>
				<a href="">医药保健</a>
				<div class="fix"></div>
			</div>
			<span class="menu-more">更多</span>
			<!--二级菜单-->
			<div class="menu-panel">
				<div class="menu-panel-hd">
					<h4>热门分类</h4>
					<div class="sub-group">
						<a href="">壹药网</a>
						<a href="">康爱多</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="">游戏</a>
				<a href="">彩贝</a>
				<a href="">演出票务</a>
				<div class="fix"></div>
			</div>
			<span class="menu-more">更多</span>
			<!--二级菜单-->
			<div class="menu-panel">
				<div class="menu-panel-hd">
					<h4>热门分类</h4>
					<div class="sub-group">
						<a href="">游戏</a>
						<a href="">彩贝</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>
	</ul>
</div>

<script type="text/javascript">
$(function() {
	var $top = $('.sec-mainNav').offset().top + $('.sec-mainNav').height()
	//左侧导航动画
	$('.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>


使用声明

1. 本站所有素材(未指定商用),仅限学习交流请勿用于商业用途。
2. 会员在本站下载的原创商用和VIP素材后,只拥有使用权,著作权归原作者及17素材网所有。
3. 原创商用和VIP素材,未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。