JQuery 实战第三讲：绚丽菜单
今天，我们将王兴魁老师JQuery 实战第三讲：菜单 这部分内容通过文字的形式体现出来，建议大家边看这段视频，边进行实践，理解这部分知识是完全轻松愉快的事情。下面我们首先将最终的效果展现出来，按照这个效果，我们一步一步去完善。
纵向菜单
横向菜单（通过鼠标移动来实现菜单隐藏/显示）
首先，我们通过html文件来实现大致效果，建立menu.htm文件。在html中添加如下代码：
代码
<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>
<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>
运行后效果如下图：
这照我们最终要实现的效果还有一定的距离，接下来建立menu.css文件。来通过css美化这个菜单样式。
通过上述css，完全可以实现我们所要的效果，各部分css功能请参考注释。接下来我们将为菜单来添加JQuery相关的事件。建立文件menu.js。
代码
ul,li{
/*清除ul、li上的小圆点*/
list-style:none;
}
ul{
/*清除子菜单中的缩进值*/
padding : 0 ;
/*IE6IE7中清除缩进值*/
margin : 0 ;
}
.main,.hmain{
/*背景图片*/
background-image :url(../Images/sb_bg.gif) ;
background-repeat : repeat-x ;
width : 120px ;
}
li{
/*菜单背景色*/
background-color : #EEEEEE ;
}
/*取消所有a标签下划线样式*/
a{
text-decoration : none ;
/*左缩进*/
padding-left : 20px;
/*css中的块级元素充满整个区域*/
display : block ;
/*IE6IE7中应用上面元素时样式会有所改变，这也是因为
IE6IE7不符合标准的问题，因此采用inline-block来解决
在其它标准浏览器中不会执行inline-block，同时为实现
与标准浏览器相同效果，还需要设置宽度*/
display : inline-block ;
width : 110px ;
/*将所有a标签都加上3px个padding*/
padding-top : 3px ;
padding-bottom : 3px ;
}
/*main 下的所有a的标签颜色*/
.main a,.hmain a{
color:white;
/*背景图小图标*/
background-image : url(../Images/plus.bmp) ;
background-repeat : no-repeat ;
background-position : 3px center ;
}
/*main下的所有li下的a标签样式*/
.main li a,.hmain li a{
color:black;
background-image : none ;
}
/*让所有的子菜单项默认都隐藏*/
.main ul,.hmain ul{
display : none ;
}
/*float浮动布局方式，横向显示*/
.hmain{
float : left ;
margin-left : 1px ;
}
在html中引入css文件：
通过上述css，完全可以实现我们所要的效果，各部分css功能请参考注释。接下来我们将为菜单来添加JQuery相关的事件。建立文件menu.js。
代码
//页面中的DOM已装载完成时，执行的代码
//css中除了IE6都支持>这种写法，下面的意思是
//找到main下面的子节点里面的a，直到他的子节点
// $(".main > a,.hmain a").click(function(){
$(".main > a").click(function(){
//找到主菜单项所对应的子菜单项
//这里的this指的是当前main主菜单所对应的节点下找到ul子节点
var ulNode=$(this).next("ul");
/* 1、基本写法
if(ulNode.css("display")=="none")
{
ulNode.css("display","block");
}
else
{
ulNode.css("display","none");
}
*/
//2、利用函数写法
//show()参数可以用数字单位是毫秒
//slow、fast、normal
//ulNode.show("fast");
//ulNode.hidden();
//3、省去自已写if繁琐的检测代码，它会去判断，
//如果当前元素是显示的，那么点击后会隐藏，
//否则相反。参数与show相同
//ulNode.toggle();
//4、卷帘显示方式，
//ulNode.slideDown();
//ulNode.slideUp();
//与Toggle相同，无需做判断
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("plus.bmp")>=0)
{
mainNode.css("background-image","url('Images/minus.bmp')");
}
else
{
mainNode.css("background-image","url('Images/plus.bmp')");
}
}
}
在html中引入下列文个件：
代码
<script src="JavaScript/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="JavaScript/menu.js" type="text/javascript"></script>
这样一个完整的菜单就实现了，我们可以分别在Firefox，IE6，IE7，IE8 等浏览器中进行测试，均无错误。
下面我们就将本节的知识点及注意的事项总结下：
1、页面中的菜单项可以通过嵌套的ul和li来表示
2、菜单最外层为ul，一层第个主菜单放在一个li中，如果
有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套取可构建多层的菜单。
3、浏览器中ul和li元素默认情痀下文字前都有圆点标识符，li元素会有缩进。Opera浏览器比较特殊，li的标识符和其他浏览器不同。
4、list-style属性值为none时，可以清除ul和li前面的小圆点
5、清除子菜单的缩进值，需要padding和margin都为0，其中IE6和IE7只有margin也为0的时候才可以清除缩进值
6、可以使用background-image来指定一个元素的背景图，如果背景图比元素的实际大小要小，那么背景图会自动在横向和纵向上重复显示，直到填满整个区域
7、可以使用background-repeat来控制背景图的重复填充方式。
8、如果一个元素上同时定义了背景图和背景色，那么有背景图的地方是不会显示背景色的
9、text-decoration属性值为none时，可以取消文字上的下划线
10、background-position可以控制背景力的位置，属性值既可以用数值，也可以用center，left，top这些值来控制横向和纵向的位置。这个属性的两个值，第一个对应横向，第二
个对应纵向
11、background-image的值为none表示没有背景图
12、background-repeat的值为no-repeat时，背景图不会在所在的区域中重复显示
13、IE6以外的其他浏览器可以通过设定display的值为block来让a元素充满所在的区域。对于IE6，则坱要设定display为inline-block，同时设定a的宽度。其他浏览器是不识别inline-block的
14、display的值为none可以隐藏元素。
15、.main a和.main >a 的不同之处，前者选 择使用了.main的这个class的元素内部所有的a节点，后者只选择了.main的子节点中的a的节点
16、.show,hide方法可以用于显示或隐藏元素，没有参数时的效果和修改css的display属性效果一样。参数可以是单位为毫秒的数字，或者是slow，normal，fast这三个文字，都
可以来控制完成显示或隐藏需要的时间。注意：；时动画效果是靠不断改变元素的宽度和高度来实现的。
17、.toggle方法更为强大，可以省去我们判断元素是显示还是隐藏的状态，直接让显示的元素隐藏起来，隐藏的元素显示出来。参数使用主法和show，hide相同。
18、slideDown，slideUp可以实现向下或向上卷动的效果，实际上是通过指定时间内修改元素的高度来实现动画效果。需要注意的是这两个方法参数为空的情况和show，hide不同。
19、.sideToggle和toggle达到的效果类似。
10、DOCTYPE对于JQuery中的动画是有影响的。没有DOCTYPE定义时，在IE中JQuery的动画会出现闪烁的糟糕效果。
21、float的值是left，可以使原本各自位于一行的元素全部在一行中向左浮动。
22、可以给多个选择器定义同样的样式，选择器之间用逗号分割。同样对于JQuery的$方法，也可以传入这个选择器
这样一个绚丽的菜单就完成了，你也可以在此基础上进行扩展，加上一些你所需要的东西，加深对JQuery的理解。
作者：mzoy(三木)
出处：http://www.cnblogs.com/mzoylee
本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
