Jquery + Css 实现横纵菜单下拉效果

最新推荐文章于 2021-11-07 16:11:11 发布

原创最新推荐文章于 2021-11-07 16:11:11 发布 · 247 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #jQuery #JavaScript #IE #HTML #ViewUI

jquery 专栏收录该内容

8 篇文章

订阅专栏

本文介绍使用JQuery实现两种不同样式的菜单效果，包括垂直菜单和横向菜单，并详细讲解了菜单展开、收起及鼠标悬停事件的处理方法。

ul,li {
	/*清除ul,li默认的小原点*/
	list-style:none;
}
ul {
	/*清除ul的缩近值,只对padding设置在IE6与IE7中并不好使还需要设置margin*/
	padding:0;
	margin: 0;
}
/*设置class需要加.*/
.main, .hmain {
	/*添加背景图片,背景图片会覆盖li的背景色*/
	background-image: url(../images/title.gif);
	/*只在横向尽量重复*/
	background-repeat: repeat-x;
	width: 120px;
	margin-top: 1px;
}
/*设置所有li的背景色*/
li {
	background-color: #EEEEEE;
}
a {
	/*取消链接的所有划线*/
	text-decoration: none;
	padding-left: 20px;
	/*使链接充满整个区并显示小手样式,但在IE6中还是有问题需要再设置display: inline-block;*/
	display: block;
	/*display: inline-block;并不是符合CSS标准*/
	display: inline-block;
	/*各个链接之间拉开些距离*/
	padding-top: 3px;
	padding-bottom: 3px;
}
/*设置main下链接的字体为白色*/
.main a, .hmain a {
	color: white;
	background-image: url(../images/collapsed.gif);
	background-repeat: no-repeat;
	/*前景距X轴左边有3像素 居中*/
	background-position: 3px center;
}
/*设置main li 下链接的字体为黑色*/
.main li a, .hmain li a {
	color: black;
	/*无背景图片*/
	background-image: none;
}
/*隐藏子菜单*/
.main ul, .hmain ul {
	display: none;
}
/*横向菜单*/
.hmain {
	/*浮动布局使原本纵向排列变成横向排列*/
	float: left;
	margin-right: 1px;
}

$(document).ready(function(){
	//页面中的DOM已经装载完成找到main下的子结点a,然后触发事件，但是不会触发子菜单
	$('.main > a').click(function(){
		//找到主菜单项对应的子菜单项
		var ulNode = $(this).next('ul');
		/*方法一：
		if(ulNode.css('display') == 'none') {
			ulNode.css('display','block');
		} else {
			ulNode.css('display','none');
		}
		*/
		
		/*
		方法二：具有动画效果
		ulNode.show(500);
		三种文字性参数的用法 时间由jquery内部自定义
		ulNode.show('fast');// normal slow
		ulNode.hide();
		toggle方法省去自己写if else这样繁琐的判断
		 是jquery为了配合show hide();
		 ulNode.toggle();
		*/
		
		
		
		/*
		方法三：具有卷帘效果
		ulNode.slideDown();//也可以加参数slow normal fast
		ulNode.slideUp();
		*/
		ulNode.slideToggle();//也可以加参数slow normal fast
		changeIcon($(this));
	});
	
	/*鼠标进入出现 但是有bug 一进入子菜单后立即被收起
		$('.hmain > a').hover(function(){
		$(this).next('ul').slideDown();
		},function(){
			$(this).next('ul').slideUp();
		});
	*/
	
	
	/*鼠标进入出现具有延时操作，鼠标进入主菜单进入子菜单再进入主菜单子菜单又出现
	//鼠标进入主菜单
	$('.hmain > a').hover(function(){
		//将子菜单放下
		$(this).next('ul').slideDown();
	},function(){
		var ulNode = $(this).next('ul');
		//设置延时
		var timeoutId = setTimeout(function(){
			//将子菜单收起
			ulNode.slideUp();
		},300);
		
		//对于鼠标进入子菜单项的设置
		ulNode.hover(function(){
			//清除延时 子菜单不会立即被收起来
			clearTimeout(timeoutId);
		},function(){
			//如果鼠标从子菜单项离开的话将子菜单收起
			$(this).slideUp();
		});
	});
	*/
	
	/*鼠标进入出现具有延时操作，鼠标离开子菜单时 子菜单闪动出现*/
	//鼠标进入主菜单
	$('.hmain').hover(function(){
		//将子菜单放下
		$(this).children('ul').slideDown();
		changeIcon($(this).children('a'));
	},function(){
		$(this).children('ul').slideUp();
		changeIcon($(this).children('a'));
	});
});

/**
修改主菜单的指示图标
*/
function changeIcon(mainNode) {
	//如果结点不为空
	if(mainNode) {
		if(mainNode.css('background-image').indexOf('collapsed.gif') >= 0) {
			mainNode.css("background-image","url('../images/expanded.gif')");
		} else {
			mainNode.css("background-image","url('../images/collapsed.gif')");
		}
	}
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- 如果删除doctype就会出现闪动效果，使整体效果变差，在IE里不会变成小手 -->
<html>
  <head>
    <title>JQuery-菜单效果</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="../css/menu.css" type="text/css">
 	<script type="text/javascript" src="../js/jquery.js"></script>
  	<script type="text/javascript" src="../js/menu.js"></script>

  </head>
  
  <body>
    <ul>
		<li class="main"> 
		<a href="#">菜单项1</a> 
			<ul>
				<li><a href="#">子菜单项11</a></li>
				<li><a href="#">子菜单项12</a></li>
			</ul>
		</li>
		<li class="main">
		<a href="#">菜单项2</a>
			<ul>
				<li><a href="#">子菜单项21</a></li>
				<li><a href="#">子菜单项22</a></li>
			</ul>
		</li>
		<li class="main">
		<a href="#">菜单项3</a>
			<ul>
				<li><a href="#">子菜单项31</a></li>
				<li><a href="#">子菜单项32</a></li>
			</ul>
		</li>
	</ul>
	<br/>
	<br/>
	<br/>
	<br/>
	<ul>
		<li class="hmain"> 
		<a href="#">菜单项1</a> 
			<ul>
				<li><a href="#">子菜单项11</a></li>
				<li><a href="#">子菜单项12</a></li>
			</ul>
		</li>
		<li class="hmain">
		<a href="#">菜单项2</a>
			<ul>
				<li><a href="#">子菜单项21</a></li>
				<li><a href="#">子菜单项22</a></li>
			</ul>
		</li>
		<li class="hmain">
		<a href="#">菜单项3</a>
			<ul>
				<li><a href="#">子菜单项31</a></li>
				<li><a href="#">子菜单项32</a></li>
			</ul>
		</li>
	</ul>
	
	
	
  </body>
</html>

注：附件是全代码效果看html文件夹中的html