可控制导航下拉方向的jQuery下拉菜单代码

最新推荐文章于 2024-08-17 23:24:44 发布

夏末_阳光依然耀眼

最新推荐文章于 2024-08-17 23:24:44 发布

阅读量431

点赞数

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

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

89 篇文章 0 订阅

订阅专栏

javascript

40 篇文章 0 订阅

订阅专栏

jquery

39 篇文章 0 订阅

订阅专栏

可控制导航下拉方向的jQuery下拉菜单代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可控制导航下拉方向的jQuery下拉菜单代码</title>

<style>
*{ margin:0; padding:0; list-style:none;}
.nav{ width:700px; height:30px; line-height:30px; margin:200px auto;}
.nav li a{ color:#fff; text-decoration:none; display:block; float:left; height:30px; line-height:30px; padding:0px 15px; font-size:12px;background:#636871;}
.nav li a:hover{ background:#4b505a;}
.nav li{float:left;position:relative; height:30px; line-height:30px;}
.nav li .second{position:absolute;left:0;display:none;}
</style>

</head>
<body>

<div class="nav">
	<li>
		<a href='#'>首页</a>
		<div class="second">
			<a href='#'>首页</a>
			<a href='#'>首页</a>
			<a href='#'>首页</a>
			<a href='#'>首页</a>
		</div>
	</li>
	<li>
		<a href='#'>菜单导航</a>
		<div class="second">
			<a href='#'>菜单导航</a>
			<a href='#'>菜单导航</a>
			<a href='#'>菜单导航</a>
			<a href='#'>菜单导航</a>
		</div>
	</li>
	<li>
		<a href='#'>时间日期</a>
		<div class="second">
			<a href='#'>时间日期</a>
			<a href='#'>时间日期</a>
			<a href='#'>时间日期</a>
			<a href='#'>时间日期</a>
		</div>
	</li>
	<li>
		<a href='#'>焦点图</a>
		<div class="second">
			<a href='#'>焦点图</a>
			<a href='#'>焦点图</a>
			<a href='#'>焦点图</a>
			<a href='#'>焦点图</a>
		</div>
	</li>
	<li>
		<a href='http://www.17sucai.com'>tab标签</a>
		<div class="second">
			<a href='http://www.17sucai.com'>tab标签</a>
			<a href='http://www.17sucai.com'>tab标签</a>
			<a href='http://www.17sucai.com'>tab标签</a>
			<a href='http://www.17sucai.com'>tab标签</a>
		</div>
	</li>
	<li>
		<a href='#'>jquery特效</a>
		<div class="second">
			<a href='#'>jquery特效</a>
			<a href='#'>jquery特效</a>
			<a href='#'>jquery特效</a>
			<a href='#'>jquery特效</a>
		</div>
	</li>
	<li>
		<a href='#'>在线客服</a>
		<div class="second">
			<a href='#'>在线客服</a>
			<a href='#'>在线客服</a>
			<a href='#'>在线客服</a>
			<a href='#'>在线客服</a>
		</div>
	</li>
	<li>
		<a href='#'>广告代码</a>
		<div class="second">
			<a href='#'>广告代码</a>
			<a href='#'>广告代码</a>
			<a href='#'>广告代码</a>
			<a href='#'>广告代码</a>
		</div>
	</li>
	<li>
		<a href='#'>相册代码</a>
		<div class="second">
			<a href='#'>相册代码</a>
			<a href='#'>相册代码</a>
			<a href='#'>相册代码</a>
			<a href='#'>相册代码</a>
		</div>
	</li>
</div>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	var nav = 1; // 默认值为0，二级菜单向下滑动显示；值为1，则二级菜单向上滑动显示
	if(nav ==0){
		$('.nav li').hover(function(){
			$('.second',this).show();
		},function(){
			$('.second',this).hide();
		});
	}else if(nav ==1){
		$('.nav li').hover(function(){
			$('.second',this).show();
		},function(){
			$('.second',this).hide();
		});
	}
});
</script>


</body>
</html>