横向纵向菜单制作 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> <title>横向纵向菜单</title> <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $(".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("normal"); //slow,fast //ulNode.toggle("normal");//自行判断是否隐藏还是。。 ulNode.slideToggle(400); changeIcon($(this)); }); $(".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) { //alert(mainNode.css("background-image")); 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> <style type="text/css"> ul,li { list-style:none; /*cursor:pointer;*/ } ul {/*去掉子菜单的缩进*/ padding:0; margin:0; } .main,.hmain { background-image:url(../images/title.gif); background-repeat:repeat-x; width:100px; } li { background-color:#EEEEEE; } a { text-decoration:none; padding-left:20px; display:block;/*块级元素,让a标签填充整个区域*/ padding-top:3px; padding-bottom:3px; /* direction:inline-block;IE6*/ } .main a,.hmain a { color:White; background-image:url(../images/collapsed.gif); background-repeat:no-repeat; background-position:3px center; } .main li a,.hmain li a { color:Black; background-image:none; } .main ul,.hmain ul { display:none; } .hmain { float:left; margin-left:1px; } </style> </head> <body> <ul> <li class="main"><a href="#">菜单项1</a><ul><li><a href="#">子菜单1</a></li><li><a href="#">子菜单2</a></li></ul></li> <li class="main"><a href="#">菜单项2</a><ul><li><a href="#">子菜单1</a></li><li><a href="#">子菜单2</a></li></ul></li> <li class="main"><a href="#">菜单项3</a><ul><li><a href="#">子菜单1</a></li><li><a href="#">子菜单2</a></li></ul></li> </ul> <br /> <br /> <ul> <li class="hmain"><a href="#">菜单项1</a><ul><li><a href="#">子菜单1</a></li><li><a href="#">子菜单2</a></li></ul></li> <li class="hmain"><a href="#">菜单项2</a><ul><li><a href="#">子菜单1</a></li><li><a href="#">子菜单2</a></li></ul></li> <li class="hmain"><a href="#">菜单项3</a><ul><li><a href="#">子菜单1</a></li><li><a href="#">子菜单2</a></li></ul></li> </ul> </body> </html>
我学习JAVA的母校