眾所周知，WordPress3.0中增加了一個(gè)非常實(shí)用方便的自定義菜單功能，這個(gè)功能可以使我們輕松的制作出多級(jí)下拉菜單，今天，筆者就通過(guò)一個(gè)簡(jiǎn)單的二級(jí)下拉菜單的示例來(lái)告訴各位童鞋具體怎么操作。
Step 1 — 在functions.php中添加以下代碼，使我們的主題支持自定義菜單功能。
add_theme_support（‘nav-menus’）;
Step 2 — 添加一個(gè)頂部菜單。
if （ function_exists（ ‘register_nav_menus’ ） ） {
register_nav_menus（
array（
‘header_menu’ => ‘Header Navigation’
）
）;
}
Step 3 — 把wp_nav_menu()函數(shù)放到一個(gè)自定義函數(shù)當(dāng)中.
function wper_so_menu（）{
if（function_exists（‘wp_nav_menu’） && has_nav_menu（‘header_menu’））：
wp_nav_menu（
array（
‘menu’ => ‘Header Navigation’,
‘container’ => ‘div’,
‘container_class’ => ‘warp’,
‘container_id’ => ‘’,
‘menu_class’ => ‘ddsmoothmenu’,
‘menu_id’ => ‘nav’,
‘echo’ => true,
‘fallback_cb’ => ‘fallback_no_menu’,
‘before’ => ‘’,
‘a(chǎn)fter’ => ‘’,
‘link_before’ => ‘’,
‘link_after’ => ‘’,
‘depth’ => 2,
‘walker’ => new Walker_Nav_Menu（）,
‘theme_location’ => ‘’,
‘show_home’ => true
）
）;
endif;
}
這里我解釋一下wp_nav_menu()函數(shù)的各個(gè)參數(shù)。這個(gè)函數(shù)的功能就是顯示一個(gè)自定義導(dǎo)航菜單(官方文檔)：
menu： 我們創(chuàng)建的菜單名稱(chēng)。本例中我們使用“Header Navigation”
container： 我們創(chuàng)建的菜單所在容器的名稱(chēng)。如果設(shè)置為“div”，則輸出結(jié)果為<div>.....</div>，本例中我們使用“div”。
container_class： 上面的容器的class屬性。如果設(shè)置為nav，則輸出結(jié)果為<div class=“nav”>.....</div>，本例中我們使用“warp”
container_id： 上面的容器的id屬性。如果設(shè)置為menu，則輸出結(jié)果為<div id=“menu”>.....</div>
menu_class：無(wú)序列表ul的class屬性。本例中我們?cè)O(shè)置為“ddsmoothmenu”，則輸入結(jié)果為<ul class=“ddsmoothmenu”>.....</ul>
menu_id：無(wú)序列表ul的id屬。如果設(shè)置為“menu-item”，則輸出結(jié)果為<ul id=“menu-item”>.....</ul>本例中我們使用“nav”
echo： 是否顯示菜單。如果設(shè)置為false，則不顯示菜單。
fallback_cb： 菜單無(wú)法顯示時(shí)的提示信息。比如：菜單未找到。
before， after：包含<a&>標(biāo)簽容器的名稱(chēng)，如果設(shè)置為：<span>和</span>則輸出結(jié)果為：<span><a>.....</a></span>
link_before， link_ after： 包含鏈接文字的標(biāo)簽名稱(chēng)，如果設(shè)置為：<em>和</em>則輸出結(jié)果為：<a><em>鏈接文字</em></a>
depth：下拉菜單的深度，本例中我們?cè)O(shè)置為：2，則只支持兩級(jí)下拉菜單。默認(rèn)為0，即無(wú)限級(jí)下拉菜單。
walker： 自定義的遍歷對(duì)象，調(diào)用一個(gè)對(duì)象定義顯示導(dǎo)航菜單。默認(rèn)為 ：new Walker_Nav_Menu（）
theme_location：后臺(tái)菜單頁(yè)面中包含菜單名稱(chēng)的容器的ID.
show_home：布爾型值，是否顯示首頁(yè)。
Step 4 — 在header.php中的適當(dāng)位置調(diào)用我們的自定義函數(shù).
Step 5 — 現(xiàn)在我們的主題已經(jīng)支持一個(gè)自定義菜單了，接下來(lái)利用jQuery實(shí)現(xiàn)下來(lái)菜單的動(dòng)畫(huà)效果。加載jQuery庫(kù)是必須地！
所用到的jQuery代碼：
（function（$） {
$（function（） {
$（document）.ready（function （） {
$（‘#nav li’）.hover（
function （） {
//顯示二級(jí)菜單，括號(hào)中的數(shù)字表示下拉菜單完全顯示出來(lái)需要200毫秒。
$（‘ul’， this）.slideDown（200）;
},
function （） {
//隱藏二級(jí)菜單
$（‘ul’, this）.slideUp（150）;
}
）;
）;
}）;
}）（jQuery）;
最后，我們得到如下HTML代碼：
<div class=“warp”>
<ul id=“nav” class=“ddsmoothmenu”>
<li id=“menu-item-6” class=“menu-item .... menu-item-6”>
<a href=“http://localhost/？page_id=2”>
<span><em>示例頁(yè)面2</em></span>
</a>
<！-- 二級(jí)下拉菜單 -->
<ul class=“sub-menu”>
<li id=“menu-item-36” class=“menu-item .... menu-item-36”>
<a href=“http://localhost/？page_id=3”>
<span><em>實(shí)例頁(yè)面3</em></span>
</a>
</li>
<li id=“menu-item-54” class=“menu-item .... menu-item-54”>
<a href=“http://localhost/？cat=1”>
<span><em>文章分類(lèi)1</em></span>
</a>
</li>
<li id=“menu-item-55” class=“menu-item .... menu-item-55”>
<a href=“http://localhost/？page_id=4”>
<span><em>示例頁(yè)面4</em></span>
</a>
</li>
<li id=“menu-item-56” class=“menu-item ..... menu-item-56”>
<a href=“http://localhost/？page_id=5”>
<span><em>示例頁(yè)面5</em></span>
</a>
</li>
</ul>
<！-- 二級(jí)下拉菜單結(jié)束 -->
</li>
</ul>
</div>
這樣，我們的下拉菜單就制作完成了，只要適當(dāng)?shù)拿阑幌录纯?，至于CSS代碼，相信聰明的你肯定可以寫(xiě)出來(lái)。