小咸儿最近在学习jQuery，对于jQuery的使用还需要在小demo中成长，今天小咸儿实践了一个菜单效果的示例：
首先来看一下在HTML中的该如何设置出这些需要的控件， |
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JQuery实战3：菜单效果</title>
<meta charset="utf-8" />
<!--<link href="css/menu.css" rel="stylesheet" type="text/css"/>-->
<link href="css/menu.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" 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 />
<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>详解：
1.页面中的菜单项可以通过嵌套的ul和li来表示。
2.菜单最外层为ul，一层每个主菜单放在一个li中，如果有子菜单，在这个主菜单的li中建立新的ul，再一次嵌套即可构建多层的菜单。
3.浏览器中的ul和li元素默认情况下文字前都有圆点标识符，li元素会有缩进。Opera浏览器比较特殊，li的标识符和其他浏览器不同。
4.list-style属性值为none时，可以清除ul和li前面的小圆点。
说到list-style属性值，接下来先把CSS样式表中代码显示出来，修正一下菜单的样式， |
代码：
ul,li {
/*清楚ul和li上的小圆点*/
list-style:none;
}
ul {
/*清楚缩进值*/
padding:0;
margin:0;
}
.main, .hmain {
background-image: url('../image/title.gif');
background-repeat: repeat-x;
width: 120px;
}
li {
background-color:#EEEEEE;
}
a {
/*取消所有下划线*/
text-decoration:none;
padding-left:20px;
display:inline-block;
width:100px;
padding-top:3px;
padding-bottom:3px;
}
.main ul,.hmain ul {
display:none;
}
.main a, .hmain a {
color: white;
background-image: url('../image/collapsed.gif');
background-repeat: no-repeat;
background-position: 3px center;
}
.main li a,.hmain li a {
color:black;
background-image:none;
}
.hmain {
float:left;
margin-right:1px;
}详解：
1.清除子菜单的缩进值，需要padding和margin都为0，其中IE6和IE7只有margin也为0的时候才可以清除缩进值。（小咸儿觉得现在使用IE6与IE7浏览器的应该很少了吧！！！）
2.可以使用background-image来指定一个元素的背景图，如果背景图比元素的实际大小要小，那么背景图会自动在横向和纵向上重复显示，直到填满整个区域。
3.可以使用background-repeat来控制背景图的重复填充方式。
4.如果一个元素上同时定义了背景图和背景色，那么有背景图的地方是不会显示背景色的。
5.text-decoration属性值为none时，可以取消文字上的下划线。
6.background-position可以控制背景图的位置，属性值既可以用数值，也可以用center，left，top这些值来控制横向和纵向的位置。这个属性的两个值，第一个对应横向，第二个对应纵向。
说完这些，小咸儿就要来说说重头戏了，JS文件怎么写，如何设计才能显示出菜单的横向显示和纵向显示， |
代码：
$(document).ready(function () {
//页面中的DOM已经装载完成时，执行的代码
$(".main > a ").click(function () {
var ulNode = $(this).next("ul");
//ulNode.toggle();
ulNode.slideToggle();
changeIcon($(this));
});
//横向第一种实现方法（未完善）
//$(".hmain > a ").hover(function () {
// $(this).next("ul").slideDown();
//}, function () {
// var ulNode = $(this).next("ul");
// var timeoutId = setTimeout(function () {
// ulNode.slideUp();
// }, 300);
// ulNode.hover(function () {
// clearTimeout(timeoutId);
// }, function () {
// $(this).slideUp();
// });
//});
//第二种，简化
$(".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('image/expanded.gif')");
} else {
mainNode.css("background-image", "url('image/collapsed.gif')");
}
}
}详解：
1、.main a 和.main > a 的不同之处，前者选择使用了.main的这个class的元素内部所有的a节点，后者只选择了.main的子节点中的a节点。
2、show，hide方法可以用于显示或隐藏元素，没有参数时的效果和修改CSS的display属性效果一样。参数可以是单位为毫秒的数字，或者是‘slow’，‘normal’，‘fast’这三个文字，都可以来控制完成显示和隐藏需要的时间。
注意：这时动画效果是靠不断改变元素的宽度和高度来实现的。
小咸儿说了这么多，重要的是来看看成果图吧！
