讲解：使用JQuery实现WordPress多层下拉导航
今日要讲解使用JQuery实现WordPress多层下拉导航的程式码。
第一行是让WordPress调用JQuery，就不多说了：
<?php wp_enqueue_script('jquery'); ? >
JQuery主程式讲解
然后是JavaScript(JQuery)的主程式：
< script type="text/javascript" >
$("#topmenu a").removeAttr("title");
jQuery(document).ready(function() {
jQuery("#topmenu ul").css({display: "none"}); // Opera Fix
jQuery("#topmenu li").hover(function(){
jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(268);
},function(){
jQuery(this).find('ul:first').css({visibility: "hidden"});
});
});
< /script >
首先看第一句：
$("#topmenu a").removeAttr("title");
这句的目的是要移除topmenu底下的连结（a）的标题（title）属性。这是因为使用wp_list_pages()时，WordPress会自动为每条连结加入标题，而这个标题会跟JQuery的Tooltip发生冲突，所以就先将title移除。
jQuery(document).ready(function() {
这一句是说，当网页载入完成后，马上运行下面的程式。
jQuery("#topmenu ul").css({display: "none"}); // Opera Fix
需要这一句的原因是，在Opera里，下层Menu收得比较慢，会被用户看到，所以先把它设为不显示。
jQuery("#topmenu li").hover(function(){
jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(268);
},function(){
jQuery(this).find('ul:first').css({visibility: "hidden"});
});
这是jQuery的.hover方法，第一个function()代表鼠标在topmenu的li之上时的效果，而第二个function()则是鼠标移出后的效果。
jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(268);
这是在鼠标移入时运行的程式，jQuery(this).find(‘ul:first’)是找到这底下第一个ul，后面是用css将它的visibility设为’可见’（visible），而display则为’none’。最后的show(268)是以动画特效慢慢显示出来，268是微秒，就是要在268微秒之内完成动画。这里使用visibility而不用display来显示，据说是因为若使用display，当鼠标快速滑过时，动画特效就不会出现，而变成将ul快速地弹出一下，便收回去，这不是我们想要的，使用visibility就能解决这个问题。
jQuery(this).find('ul:first').css({visibility: "hidden"});
这句就是当鼠标移走时，把第一个ul藏起来，这里也会以动画的方式慢慢地收回去。
CSS部分讲解
jQuery的部分解释完了，接下来看CSS的部分。首先看第一段：
#topmenu, #topmenu ul {
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
z-index:300;
width:100%;
background:#fff;
font-weight:bold;
}
这里要注意是，position要设为relative，line-height记得要设定，其他的就是外观设定。
#topmenu a {
display:block;
padding:0.25em 1em;
color:#686868;
border-right:1px solid #c8c8c8;
text-decoration:none;
background:#fff;
}
#topmenu a:hover {
background:#888;
color:#fff;
}
这两段都是外观设定。
#topmenu li {
float:left;
position:relative;
}
这是让Menu横向排列。
#topmenu ul {
position:absolute;
display:none;
width:12em;
top:1.9em;
left:-1px;
}
这里是第二层的Menu，display是none，因为一开始，第二层是不显示的。记得要设width，因为第三层会在第二层的右边，相距多少就是根据这个width来设定。top是离第一层多远，因为line-height为1.5em加连结（a）上下padding各0.25em，就等于2em，设为1.9em是为了让第二层贴着第一层1em。left等于-1px也是同样的道理，让第二层往左一点。
#topmenu ul a {
border-left:1px solid #c8c8c8;
}
#topmenu li ul {
border-top:1px solid #c8c8c8;
width:14.1em;
}
这两段是外观设定。
#topmenu li ul a {
width:12em;
height:auto;
float:left;
border-bottom:1px solid #c8c8c8;
}
这段要注意是width要设定，同样因为下一层是在右边出现。float:left也是同样的原因。
#topmenu li:hover ul ul, #topmenu li:hover ul ul ul, #topmenu li:hover ul ul ul ul {
display:none;
}
#topmenu li:hover ul, #topmenu li li:hover ul, #topmenu li li li:hover ul, #topmenu li li li li:hover ul {
display:block;
}
最后这两段是设定，hover时的显示方式，也就是只显示下一层，不会显示下下一层。
全部的程式码解释完毕，你学会了吗？记得要自己试着改几个设定，看看有什么不一样的效果。有什么新发现，或问题，可以跟我讨论。
