|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 |
<%@ 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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
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; } |
