简单的div+css+jquery菜单导航

最新推荐文章于 2017-09-17 21:23:10 发布

azzg2008

最新推荐文章于 2017-09-17 21:23:10 发布

阅读量2.5k

点赞数

分类专栏： Web前端文章标签： jquery菜单 css div function class float

本文链接：https://blog.csdn.net/azzg2008/article/details/7218189

版权

Web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>导航菜单</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<style type="text/css">
	a{
		text-decoration: none;
	}
	
	.topnav {
		list-style: none;
		margin: 0;
		background: #333;
		font-size: 14px;
		float: left;
		width: 920px;
		padding: 0 20px;
	}
	
	.topnav li {
		float: left;
		margin: 0;
		padding: 0 15px;
		position: relative;
	}
	
	.topnav li a {
		padding: 10px 5px;
		display: block;
		float: left;
		color: #fff;
	}
	
	.subnav {
		list-style: none;
		position: absolute;
		left: 0;
		top: 35px;
		display:none;
		margin: 0;
		padding: 0;
		background: #333;
	}
	
	.subnav li {
		margin: 0;
		padding: 0;
		width:100px;
		clear: both;
		white-space:nowrap;
		width:100%;
	}
	.subnav li a{
		float: left;
	}
</style>
<script type="text/javascript">
	$(function(){
		$('.topnav li a').hover(function(){
			var topnavLi = $(this).parent();
			var subnavUl = topnavLi.find('.subnav');
			subnavUl.slideDown('fast').show();
			topnavLi.hover(function(){},function(){
				subnavUl.slideUp('slow');
			});
		},function(){
		});
	});
</script>
</head>
<body>
<div>
<ul class="topnav">
	<li>
		<a href="#">主页</a>
	</li>
	<li>
		<a href="#">菜单1</a>
		<ul class="subnav">
			<li><a href="#">子菜单1</a></li>
			<li><a href="#">子菜单2</a></li>
			<li><a href="#">子菜单3</a></li>
		</ul>
	</li>
	<li>
		<a href="#">菜单2</a>
		<ul class="subnav">
			<li><a href="#">子菜单1</a></li>
			<li><a href="#">子菜单2</a></li>
			<li><a href="#">子菜单3</a></li>
		</ul>
	</li>
	<li>
		<a href="#">菜单3</a>
	</li>
</ul>
</div>
</body>
</html>

azzg2008

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
简单的div+css+jquery菜单导航

导航菜单 a{ text-decoration: none; } .topnav { list-style: none; margin: 0; background: #333; font-size: 14px; float: left; width: 920px; padding: 0 20px; } .topnav li { float
复制链接

扫一扫