WordPress3.0 無限級分類下拉選單製作方法

幫朋友做個小導航時用到了下拉選單，話說 WordPress3.0 以上版本的」wp_nav_menu（）」 真是好用，加上主題自定義選單的設定簡直可以說是完美的網站導航。

涉及到下拉選單製作的方法最核心的還是滑鼠移動到上面的處理。下面是呼叫 wp_nav_menu（） 函式後的 HTML 結構 （做解釋用）：

<div >
<ul id="menu-選單名">
<li ><a href="#"> 選單專案 1</a>
<ul >
<li><a href="#"> 子選單專案 1-1</a></li>
<li><a href="#"> 子選單專案 1-2</a></li>
…
</ul>
</li>
<li><a href="#"> 選單專案 2</a></li>
</ul>
</div>

這是一種很經典很優雅的導航 HTML 程式碼，在 IE6 以上以及標準瀏覽器中要實現下拉效果只用一句 CSS 就能搞定。比如下面的示例程式碼 （可自定義）：

.menu li a { float:left; height:35px; width:100px;/*選單高度與寬度*/ line-height:35px; text-align:center; color：#ccc; text-align:center; }

.menu li { float:left; height:1%; background:#000; }

.menu-sjys-container { position:absolute; z-index:1000;}

.menu li ul li { clear:both; border-bottom:1px solid #333; border-right:none; }

.menu-item { position:relative; border-right:1px dotted #333; }

.menu-item:hover>.sub-menu{ display:block; /*下拉效果只用到這一段程式碼*/ }

.sub-menu { position:relative; left:1px; margin:0; z-index:101; display:none;/*一般情況下隱藏子選單*/ }

.sub-menu ul.sub-menu { position:absolute; left:100px; top:0;}

上面的這兩段程式碼在 IE6 以上以及標準瀏覽器中表現的很完美，原因是 IE6 這種老瀏覽器還不支援任何標籤的偽類屬性，即 htmlTag:hover 。所以為了相容我們又不得不用 JS 來實現 （純 CSS 亦可） 。我大概寫了一段 JS 可以勉強達到效果，但不知道為什麼在 IE 中切換選單時會有閃動的感覺，這個得求教 JS 高手了哈。

<!–[if lt IE 7]>
<script type="text/javascript">
//<![CDATA[
/*導航聯動效果*/
(function(){
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|s)"+searchClass+"(s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
function hoverSubMenu(node, flag) {
node.onmouseover = function() {
var subMenu = getElementsByClass("sub-menu", this)[0];
if (subMenu) {
subMenu.style.display = "block";
}
}
node.onmouseleave = function() {
var subMenu = getElementsByClass("sub-menu", this)[0];
if (subMenu) {
subMenu.style.display = "none";
}
}
}
var menuItems = getElementsByClass("menu-item");
for (var i=0; i<menuItems.length; i++) {
hoverSubMenu(menuItems[i], i);
}
})();
//]]>
</script>
<![endif]—>

問題在於 W3C 對 onmouseout 事件處理方法不是很理想，微軟 IE 支援的 onmouseleave 方法確可以正常工作。