Zack Live

今日要讲解使用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时的显示方式，也就是只显示下一层，不会显示下下一层。

全部的程式码解释完毕，你学会了吗？记得要自己试着改几个设定，看看有什么不一样的效果。有什么新发现，或问题，可以跟我讨论。

欢迎到我们的论坛发表你的看法