JQuery应用三：菜单效果
<%@ 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-imagefunction 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;}
页:
[1]