使用JQuery实现WordPress多层下拉导航
多层下拉导航(Drop Down Menu)，已经是一项十分普遍的技术。只是其实作方法各不相同，随着CSS的普及，有不少人试着以纯CSS的方式来实现，这种方法的最大问题是IE6不能完全支持，要克服这个障碍，需要比本身的程式还要多出很多的代码，所以并不是很多人采用。另外一种做法就是使用JavaScript，也是我们今天要讲的方法。由于时间关系（今天比较忙），本篇只讲怎么做，明天再具体讲解为什么这么做。今天我们要做到跟这个一样的效果
要用JavaScript的话，我会直接想到JQuery，这算是目前最流行的JavaScript库(lib)，有了它，我们能省下很多的时间。而且WordPress本身也包含JQuery，你可以在wp-includes\js里面找到。所以要在WordPress使用JQuery就更简单了，只要在<head></head>之间加入：
<?php wp_enqueue_script('jquery'); ? >
就可以了。现在我们假设我们的导航div是topmenu，请在上面那句的下一行加入：
<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>
这就是我们要用到的全部JavaScript，好像很少对吧，这就是JQuery可爱的地方。
再来我们看一下WordPress那边，就像平常那样用wp_list_pages()就可以了：
<ul id="topmenu"> <?php wp_list_pages(’sort_column=menu_order&title_li=’); ? > </ul>
最后就是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;
}
#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;
}
#topmenu ul {
position:absolute;
display:none;
width:12em;
top:1.9em;
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;
}
#topmenu ul ul {
top:auto;
}
#topmenu li ul ul {
left:12em;
margin:0px 0 0 10px;
}
#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;
}
你可以将以上的CSS加入到主题的style.css文件里，这样就能实现多层下拉导航的效果。明天我会具体讲解这些代码的意义。写得有点匆忙，有错漏的地方，欢迎指正。
[via: kriesi.at|seoadsensethemes]
[...] 今日要讲解使用JQuery实现WordPress多层下拉导航的程式码。 [...]