jquery简单菜单下拉导航

最新推荐文章于 2022-09-12 01:08:12 发布

夏末_阳光依然耀眼

最新推荐文章于 2022-09-12 01:08:12 发布

阅读量542

点赞数

分类专栏： div+css html5+css3 javascript jquery 文章标签： javascript css div html js

本文链接：https://blog.csdn.net/boyit0/article/details/53004603

版权

div+css 同时被 3 个专栏收录

89 篇文章 0 订阅

订阅专栏

javascript

40 篇文章 0 订阅

订阅专栏

jquery

39 篇文章 0 订阅

订阅专栏

jquery简单菜单下拉导航代码如下：复制运行即可

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单导航菜单</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style>
*{ margin:0; padding:0; list-style:none;}
#nav {
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 1px solid #d5dce8;
	border-right: 1px solid #d5dce8;
	border-bottom: 1px solid #d5dce8;
	border-bottom-left-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	-webkit-border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-webkit-border-bottom-right-radius: 4px;
	height: 50px;
	padding-left: 15px;
	padding-right: 15px;
	background: #edf3f7;
}
#nav li {
	float: left;
	display: block;
	background: none;
	position: relative;
	z-index: 999;
	margin: 0 1px;
}
#nav li a {
	display: block;
	padding: 0;
	font-weight: 700;
	line-height: 50px;
	text-decoration: none;
	color: #818ba3;
	zoom: 1;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	padding: 0px 12px;
}
#nav li a:hover, #nav li a.hover {
	background-color: #fff;
	border-left: 1px solid #d5dce8;
	border-right: 1px solid #d5dce8;
	color: #576482;
}
/* @group subnav */
#nav ul {
	position: absolute;
	left: 1px;
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	padding-bottom: 3px;
}
#nav ul li {
	width: 180px;
	float: left;
	border-top: 1px solid #fff;
	text-align: left;
}
#nav ul li:hover {
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
}
#nav ul a {
	display: block;
	height: 20px;
	line-height: 20px;
	padding: 8px 5px;
	color: #666;
	border-bottom: 1px solid transparent;
	text-transform:  uppercase;
	color: #797979;
	font-weight: normal;
}
#nav ul a:hover {
	text-decoration: none;
	border-right-color: transparent;
	border-left-color: transparent;
	background: transparent;
	color: #4e4e4e;
}
</style>
<script type="text/javascript">
$(document).ready(function() {	
	$('#nav li').hover(function() {
		$('ul', this).slideDown(200);
		$(this).children('a:first').addClass("hover");
	}, function() {
		$('ul', this).slideUp(100);
		$(this).children('a:first').removeClass("hover");		
	});
	
	
});

</script>

</head>

<body>
<div class="wrap">
	<ul id="nav">
		<li><a href="#">Homepage</a></li>
		<li><a href="#">About the Mag</a>
			<ul>
				<li><a href="#">Company</a></li>
				<li><a href="#">Authors</a></li>
				<li><a href="#">Write for Us?</a></li>
				<li><a href="#">Advertising</a></li>
				<li><a href="#">Get in Touch</a></li>
			</ul>
		</li>
		<li><a href="#">Freebies</a>
			<ul>
				<li><a href="#">PSD</a></li>
				<li><a href="#">AI Vectors</a></li>
				<li><a href="#">Patterns</a></li>
				<li><a href="#">Icons</a></li>
			</ul>			
		</li>
		<li><a href="#">Tutorials</a>
			<ul>
				<li><a href="#">HTML5</a></li>
				<li><a href="#">CSS3</a></li>
				<li><a href="#">jQuery</a></li>
				<li><a href="#">PHP MySQL</a></li>
				<li><a href="#">Ruby on Rails</a></li>
			</ul>
		</li>
		<li><a href="#">Web Tools</a>
			<ul>
				<li><a href="#">Performance</a></li>
				<li><a href="#">Browser Testing</a></li>
				<li><a href="#">CMS Plugins</a></li>
				<li><a href="#">Cheat Sheets</a></li>
			</ul>
		</li>
		<li><a href="#">Originals</a>
			<ul>
				<li><a href="#">Website Design</a></li>
				<li><a href="#">Mobile</a></li>
				<li><a href="#">User Interface</a></li>
				<li><a href="#">Freelancing</a></li>
				<li><a href="#">Inspiration</a></li>
			</ul>
		</li>
	</ul>
</div>


</body>
</html>

夏末_阳光依然耀眼

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery简单菜单下拉导航

jquery简单菜单下拉导航代码如下：复制运行即可简单导航菜单*{ margin:0; padding:0; list-style:none;}#nav { margin: 0; padding: 0; list-style: none; border-left: 1px solid #d5dce8; border-right: 1px solid #d5
复制链接

扫一扫