Jquery系列之横向纵向菜单

2025-02-25 技术教程

jsp页面

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><linktype="text/css"rel="stylesheet"href="css/menu.css"></link><scripttype="text/javascript"src="js/jquery-1.4.2.js"></script><scripttype="text/javascript"src="js/menu.js"></script><title>横向纵向菜单</title></head><body><ul><liclass="main"><ahref="#">菜单项1</a><ul><li><ahref="#">子菜单项11</a></li><li><ahref="#">子菜单项12</a></li></ul></li><liclass="main"><ahref="#">菜单项2</a><ul><li><ahref="#">子菜单项21</a></li><li><ahref="#">子菜单项22</a></li></ul></li><liclass="main"><ahref="#">菜单项3</a><ul><li><ahref="#">子菜单项31</a></li><li><ahref="#">子菜单项32</a></li></ul></li></ul><br/><br/><br/><ul><liclass="hmain"><ahref="#">菜单项1</a><ul><li><ahref="#">子菜单项11</a></li><li><ahref="#">子菜单项12</a></li></ul></li><liclass="hmain"><ahref="#">菜单项2</a><ul><li><ahref="#">子菜单项21</a></li><li><ahref="#">子菜单项22</a></li></ul></li><liclass="hmain"><ahref="#">菜单项3</a><ul><li><ahref="#">子菜单项31</a></li><li><ahref="#">子菜单项32</a></li></ul></li></ul></body></html>

css样式

ul,li{ /*清除ul和li上默认的小圆点*/list-style:none; } ul{ /*清除子菜单的缩进值*/padding:0; margin:0; } .main,.hmain{ background-p_w_picpath:url(../p_w_picpaths/title.gif); background-repeat:repeat-x; width:120px; } li{ background-color:#EEEEEE; } a{ /*取消所有的下划线*/text-decoration:none; padding-left:20px; display:block; display:inline-block; width:100px; padding-top:3px; padding-bottom:3px; } .maina,.hmaina{ color:white; background-p_w_picpath:url(../p_w_picpaths/collapsed.gif); background-repeat:no-repeat; background-position:3pxcenter; } .mainlia,.hmainlia{ color:black; background-p_w_picpath:none; } .mainul,.hmainul{ display:none; } .hmain{ float:left; margin-right:1px; }

Jquery代码

$(document).ready(function(){ //页面中的DOM已经装载完成时，执行的代码 $(".main>a").click(function(){ //找到主菜单项对应的子菜单项 varulNode=$(this).next("ul"); /* if(ulNode.css("display")=="none"){ ulNode.css("display","block"); }else{ ulNode.css("display","none"); } *///ulNode.show("slow");//normalfast //ulNode.hide(); //ulNode.toggle(); // //ulNode.slideDown("slow"); //ulNode.slideUp; ulNode.slideToggle(); changeIcon($(this)); }); $(".hmain").hover(function(){ $(this).children("ul").slideDown(); changeIcon($(this).children("a")); },function(){ $(this).children("ul").slideUp(); changeIcon($(this).children("a")); }); }); /** *修改主菜单的指示图标 */functionchangeIcon(mainNode){ if(mainNode){ if(mainNode.css("background-p_w_picpath").indexOf("collapsed.gif")>=0){ mainNode.css("background-p_w_picpath","url('p_w_picpaths/expanded.gif')"); }else{ mainNode.css("background-p_w_picpath","url('p_w_picpaths/collapsed.gif')"); } } }