Jquery实战——横纵向的菜单

　　横纵向的菜单效果，点击纵向菜单显示其子菜单。鼠标指向横菜单的时候。显示其子菜单，鼠标离开，子菜单隐藏。

　　HTML代码：

<span style="font-size:18px;"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>横纵向的菜单</title><link href="css/menu.css" rel="stylesheet" /><script src="js/JQuery.js"></script><script src="js/menu.js"></script>
</head>
<body><ul><li class="main"><a href="#">菜单项1</a><ul><li><a href="#">菜单项11</a></li><li><a href="#">菜单项12</a></li></ul></li><li class="main"><a href="#">菜单项2</a><ul><li><a href='#'>菜单项21</a></li><li><a href="#">菜单项22</a></li></ul></li><li class="main"><a href="#">菜单项3</a><ul><li><a href="#">菜单项31</a></li><li><a href="#">菜单项32</a></li></ul></li></ul><br /><br /><br /><ul><li class="hmain"><a href="#">菜单项1</a><ul><li><a href="#">菜单项11</a></li><li><a href="#">菜单项12</a></li></ul></li><li class="hmain"><a href="#">菜单项2</a><ul><li><a href='#'>菜单项21</a></li><li><a href="#">菜单项22</a></li></ul></li><li class="hmain"><a href="#">菜单项3</a><ul><li><a href="#">菜单项31</a></li><li><a href="#">菜单项32</a></li></ul></li></ul>
</body>
</html>
</span>

　　CSS代码：

<span style="font-size:18px;">body {
}
ul,li{/*清除菜单前面的点和圈*/list-style:none;}
ul {padding:0;margin:0;
}
.main ,.hmain {background-image:url(../images/title.gif);background-repeat:repeat-x;width:100px;
}
li{background-color:#999;
}
a{/*取消全部的下划线*/text-decoration:none;padding-left:15px;display:block ;   /*让a标签充满这个区域*//*针对IE6*/display:inline-block;width:85px;padding-top:3px;padding-bottom:3px;
}
.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;
}</span>

　　JQuery代码：

<span style="font-size:18px;">$(function () {$(".main > a , .hmain > 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, 500//ulNode.hide();//ulNode.toggle();//显示和隐藏。自己主动推断//ulNode.slideDown("slow");//显示//ulNode.slideUp();//隐藏ulNode.slideToggle();changeIcon($(this));});$(".hmain").hover(function () {$(this).children("ul").show("fast");changeIcon($(this).children("a"));}, function () {$(this).children("ul").hide("fast");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)");}}}</span>

1.HTML总结：

1.页面中的菜单项能够通过嵌套ul和li来表示

2.CSS总结：

1.list-style属性为none时能够清除ul和li前面的小圆点

2.能够使用background-repeat来控制背景图的反复填充方式

3. text-decoration属性值为none时，能够取消文字上的下划线

4,.display的值为none能够用于隐藏元素

3.JQuery总结：

1. .main a 和 .main >a不同之处是。前者选择使用了.main的这个class的元素内部的全部的a节点，后者仅仅选择了.main的子节点中的a节点

2. show，hide方法能够用于显示或隐藏元素，。没有參数时的效果和改动CSS的display属性效果一样。
參数能够是单位为毫秒的数字。或者是‘slow’。‘normal’，‘fast’这三个文字都能够来控制完毕显示或隐藏须要的时间。

3.toggle方法更为强大，能够省去推断元素是显示还是隐藏的状态。能够让显示的元素隐藏起来，能够让隐藏的元素显示出来，參数用法和show，hide同样。