JQuery应用三：菜单效果

xiaobojava

浏览: 990187 次
性别:
来自: 上海

最近访客更多访客>>

apex53

redww

sys_ks_cnm

smh0310

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQuery

jQuery CSS JavaScript Cache HTML

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  
    <title>JQuery菜单</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="css/menu.css">
	<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
	
	<script language="javascript">
		$(document).ready(function(){
			//查找所有主菜单
			//$(".main > a,.hmain > a").click(function(){
			$(".main > a").click(function(){
				//当前菜单已经展开，取消确事件
				if($(this).css("background-image").indexOf("expanded.gif")>=0){
					changeIcon($(this));//改变左边的图标
					var ulNode = $(this).next("ul");
					ulNode.slideToggle();
					return;
				}
				//把其它展开的都关闭
				$(".main >a ").each(function(index){
					if($(this).css("background-image").indexOf("expanded.gif")>=0){
						changeIcon($(this));
						var ulNode = $(this).next("ul");
						//slideUp()：通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
						ulNode.slideUp();
					}
				});
				
				changeIcon($(this));//改变左边的图标
				var ulNode = $(this).next("ul");
				/*
					if(ulNode.css("display")=="none"){
						ulNode.css("display","block");
					}else{
						ulNode.css("display","none");
					}
				*/
				//JQuery动画效果
				//ulNode.show("slow");//slow,normal,fast
				//ulNode.hide(300);
				//ulNode.toggle("slow");
				//ulNode.slideDown("normal");
				//ulNode.slideUp();
				//slideToggle()：通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数
				ulNode.slideToggle();
			});
			
			//hover：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法
			$(".hmain").hover(function(){
				var liNode = $(this);
				var aNode = liNode.children("a");
				if(aNode.css("background-image").indexOf("collapsed.gif")>=0){
					//延迟处理，防止用户不小心划动
					timeoutid = setTimeout(function(){
						changeIcon(aNode);
						//slideDown()：与slideUp()相反
						liNode.children("ul").slideDown();
					},300);
				}
			},function(){
				clearTimeout(timeoutid);
				var aNode = $(this).children("a");
				if(aNode.css("background-image").indexOf("expanded.gif")>=0){
					changeIcon(aNode);
					$(this).children("ul").slideUp();
				}
			});
			
		});
		
		//改变当菜单项的background-image
		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)");
				}
			}
		}
	</script>
	
  </head>
  
  <body>
  	<div>
	  	<ul>
	  		<li class="main">
	  			<a href="#">菜单项1</a>
	  			<ul>
	  				<li><a href="#">子菜单项11</a></li>
	  				<li><a href="#">子菜单项12</a></li>
	  				<li><a href="#">子菜单项13</a></li>
	  			</ul>
	  		</li>
	  		<li class="main">
	  			<a href="#">菜单项2</a>
	  			<ul>
	  				<li><a href="#">子菜单项21</a></li>
	  				<li><a href="#">子菜单项22</a></li>
	  				<li><a href="#">子菜单项23</a></li>
	  			</ul>
	  		</li>
	  		<li class="main">
	  			<a href="#">菜单项3</a>
	  			<ul>
	  				<li><a href="#">子菜单项31</a></li>
	  				<li><a href="#">子菜单项32</a></li>
	  				<li><a href="#">子菜单项33</a></li>
	  			</ul>
	  		</li>
	  	</ul>
  	</div>
  	<br><br><br>
  	<hr width="80%">
  	<div>
  		<ul>
	  		<li class="hmain">
	  			<a href="#">菜单项1</a>
	  			<ul>
	  				<li><a href="#">子菜单项11</a></li>
	  				<li><a href="#">子菜单项12</a></li>
	  				<li><a href="#">子菜单项13</a></li>
	  			</ul>
	  		</li>
	  		<li class="hmain">
	  			<a href="#">菜单项2</a>
	  			<ul>
	  				<li><a href="#">子菜单项21</a></li>
	  				<li><a href="#">子菜单项22</a></li>
	  				<li><a href="#">子菜单项23</a></li>
	  			</ul>
	  		</li>
	  		<li class="hmain">
	  			<a href="#">菜单项3</a>
	  			<ul>
	  				<li><a href="#">子菜单项31</a></li>
	  				<li><a href="#">子菜单项32</a></li>
	  				<li><a href="#">子菜单项33</a></li>
	  			</ul>
	  		</li>
	  	</ul>
  	</div>
  </body>
  
</html>

menu.css内容如下：

ul,li {
	/**
	 * disc：CSS1实心圆
	 * circle：CSS1空心圆
	 * square：CSS1实心方块
	 * decimal：CSS1阿拉伯数字
	 * none：CSS1不使用项目符号
	 **/
	list-style-type: none;
}
ul {
	/**
	 * 检索或设置对象四边的补丁边距。
     * 如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
     * 如果只提供一个，将用于全部的四条边。
     * 如果提供两个，第一个用于上－下，第二个用于左－右。
     * 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
     * 内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
	 * 不允许负值。
	 **/
	padding: 0px;
	/**
	 * 检索或设置对象四边的外延边距。参数与padding一样
	 */
	margin: 0px;
}
.main,.hmain {
	background-image: url(../images/title.gif);
	/**
	 * background-repeat：设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像。
	 * repeat-x：背景图像在横向上平铺
	 * repeat-y：背景图像在纵向平铺
	 * repeat：背景图像在纵向和横向上平铺
	 * no-repeat：背景图像不平铺
	 **/
	background-repeat: repeat-x;
	width: 120px;
}
li{
	background-color: #eeeeee;
}
a {
	/**
	 * text-decoration：检索或设置对象中的文本的装饰。
	 *				    有href特性的a，以及u，ins对象默认值为underline 。
	 *				    对象strike，s，del，默认值是line-through。
	 *				    没有文本的对象此属性不会作用。
	 * none：无装饰 blink：闪烁 underline：下划线 line-through：贯穿线 overline：上划线 
	 **/
	text-decoration: none;
	/**
	 * padding-left：检索或设置对象左边的补丁边距。
	 */
	padding-left:20px;
	/**
	 * display：设置或检索对象是否及如何显示。
	 * none: CSS1隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
	 * inline-block：元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性
	 */
	display: inline-block;
	width: 100px;
	padding-top: 3px;
	padding-bottom: 3px;
}
.main a,.hmain a {
	color: white;
	background-image: url(../images/collapsed.gif);
	background-repeat: no-repeat;
	/**
	 * 设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。
     * 如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
     * 该属性定位不受对象的补丁属性(padding)设置影响。 
	 **/
	background-position: 3px center;
}
.main li a,.hmain li a {
	color:black;
	background-image: none;
}
.main ul,.hmain ul {
	display: none;
}
.hmain {
	/**
	 * float：该属性的值指出了对象是否及如何浮动
	 * none：对象不浮动 left：对象浮在左边 right：对象浮在右边
	 **/
	float: left;
	margin-right: 1px;
}