jquery实战之横纵菜单特效
以下为html代码
<title>横向和纵向菜单</title><link rel="stylesheet" type="text/css" href="css/menu.css"/><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/menu.js"></script></head><body> <ul> <li name="code">ul li/*清楚原点*/{list-style:none;}ul/*清楚缩进*/{padding:0px;margin:0px;}.main,.hmain{background-image:url(../images/title.gif);background-repeat:repeat-x;width:120px;}li{ background-color:#eeeeee; }/*背景图片会覆盖背景图片*/a{ text-decoration:none;/*取消所有下划线*/padding-left:20px;display:block;display:inline-block;/*兼容ie6*/width:100px;padding-top:3px;padding-bottom:3px;}.main a,.hmain a{color:#FFF; 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-right:1px;}?以下是jquery代码
$(document).ready(function(){/*页面dom装载完成执行的代码*/$(".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(500);//ulNode.show("slow");//normal fast//ulNode.hide();//ulNode.toggle();//自动显示和隐藏//ulNode.slideDown("normal");//动态卷入//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"));});});/** * 修改主菜单的指示图标 */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')");}}}?并且提供源码下载