眾所周知,WordPress3.0中增加了一個非常實用方便的自定義菜單功能,這個功能可以使我們輕松的制作出多級下拉菜單,今天,筆者就通過一個簡單的二級下拉菜單的示例來告訴各位童鞋具體怎么操作.

Step 1 — 在functions.php中添加以下代碼,使我們的主題支持自定義菜單功能。

add_theme_support（‘nav-menus’）;

Step 2 — 添加一個頂部菜單.

1. if （ function_exists（ ‘register_nav_menus’ ） ） { 
2.  
3. register_nav_menus（ 
4.  
5. array（ 
6.  
7. ‘header_menu’ => ‘Header Navigation’ 
8.  
9. ） 
10.  
11. ）; 
12.  
13. } 

Step 3 — 把wp_nav_menu()函數放到一個自定義函數當中.

1. function wper_so_menu（）{ 
2.  
3. if（function_exists（‘wp_nav_menu’） && has_nav_menu（‘header_menu’））： 
4.  
5. wp_nav_menu（ 
6.  
7. array（ 
8.  
9. ‘menu’ => ‘Header Navigation’, 
10.  
11. ‘container’ => ‘div’, 
12.  
13. ‘container_class’ => ‘warp’, 
14.  
15. ‘container_id’ => ‘’, 
16.  
17. ‘menu_class’ => ‘ddsmoothmenu’, 
18.  
19. ‘menu_id’ => ‘nav’, 
20.  
21. ‘echo’ => true, 
22.  
23. ‘fallback_cb’ => ‘fallback_no_menu’, 
24.  
25. ‘before’ => ‘’, 
26.  
27. ‘after’ => ‘’, 
28.  
29. ‘link_before’ => ‘’, 
30.  
31. ‘link_after’ => ‘’, 
32.  
33. ‘depth’ => 2, 
34.  
35. ‘walker’ => new Walker_Nav_Menu（）, 
36.  
37. ‘theme_location’ => ‘’, 
38.  
39. ‘show_home’ => true 
40.  
41. ） 
42.  
43. ）; 
44.  
45. endif; 
46.  
47. } 

這里我解釋一下wp_nav_menu()函數的各個參數,這個函數的功能就是顯示一個自定義導航菜單(官方文檔):

menu： 我們創建的菜單名稱,本例中我們使用“Header Navigation”.

container：我們創建的菜單所在容器的名稱。如果設置為“div”，則輸出結果為<div>.....</div>，本例中我們使用“div”。

container_class： 上面的容器的class屬性。如果設置為nav，則輸出結果為<div class=“nav”>.....</div>，本例中我們使用“warp”

container_id： 上面的容器的id屬性。如果設置為menu，則輸出結果為<div id=“menu”>.....</div>

menu_class：無序列表ul的class屬性。本例中我們設置為“ddsmoothmenu”，則輸入結果為<ul class=“ddsmoothmenu”>.....</ul>

menu_id：無序列表ul的id屬。如果設置為“menu-item”，則輸出結果為<ul id=“menu-item”>.....</ul>本例中我們使用“nav”

echo： 是否顯示菜單。如果設置為false，則不顯示菜單。

fallback_cb： 菜單無法顯示時的提示信息。比如：菜單未找到。

before， after：包含<a&>標簽容器的名稱，如果設置為：<span>和</span>則輸出結果為：<span><a>.....</a></span>

link_before， link_ after：包含鏈接文字的標簽名稱，如果設置為：<em>和</em>則輸出結果為：<a><em>鏈接文字</em></a>

depth：下拉菜單的深度，本例中我們設置為：2，則只支持兩級下拉菜單。默認為0，即無限級下拉菜單。

walker： 自定義的遍歷對象，調用一個對象定義顯示導航菜單。默認為 ：new Walker_Nav_Menu（）

theme_location：后臺菜單頁面中包含菜單名稱的容器的ID.

show_home：布爾型值，是否顯示首頁。

Step 4 — 在header.php中的適當位置調用我們的自定義函數.

Step 5 — 現在我們的主題已經支持一個自定義菜單了,接下來利用jQuery實現下來菜單的動畫效果,加載jQuery庫是必須地.

所用到的jQuery代碼:

1. （function（$） { 
2.  
3. $（function（） { 
4.  
5. $（document）.ready（function （） { 
6.  
7. $（‘#nav li’）.hover（ 
8.  
9. function （） { 
10.  
11. //顯示二級菜單，括號中的數字表示下拉菜單完全顯示出來需要200毫秒。 
12.  
13. $（‘ul’， this）.slideDown（200）; 
14.  
15. }, 
16.  
17. function （） { 
18.  
19. //隱藏二級菜單 
20.  
21. $（‘ul’, this）.slideUp（150）; 
22.  
23. } 
24.  
25. ）; 
26.  
27. ）; 
28.  
29. }）; 
30.  
31. }）（jQuery）; 

最后,我們得到如下HTML代碼:

1. <div class=“warp”> 
2.  
3. <ul id=“nav” class=“ddsmoothmenu”> 
4.  
5. <li id=“menu-item-6” class=“menu-item .... menu-item-6”> 
6.  
7. <a href=“http://localhost/？page_id=2”> 
8.  
9. <span><em>示例頁面2</em></span> 
10.  
11. </a> 
12.  
13. <！-- 二級下拉菜單 --> 
14.  
15. <ul class=“sub-menu”> 
16.  
17. <li id=“menu-item-36” class=“menu-item .... menu-item-36”> 
18.  
19. <a href=“http://localhost/？page_id=3”> 
20.  
21. <span><em>實例頁面3</em></span> 
22.  
23. </a> 
24.  
25. </li> 
26.  
27. <li id=“menu-item-54” class=“menu-item .... menu-item-54”> 
28.  
29. <a href=“http://localhost/？cat=1”> 
30.  
31. <span><em>文章分類1</em></span> 
32.  
33. </a> 
34.  
35. </li> 
36.  
37. <li id=“menu-item-55” class=“menu-item .... menu-item-55”> 
38.  
39. <a href=“http://localhost/？page_id=4”> 
40.  
41. <span><em>示例頁面4</em></span> 
42.  
43. </a> 
44.  
45. </li> 
46.  
47. <li id=“menu-item-56” class=“menu-item ..... menu-item-56”> 
48.  
49. <a href=“http://localhost/？page_id=5”> 
50.  
51. <span><em>示例頁面5</em></span> 
52.  
53. </a> 
54.  
55. </li> 
56.  
57. </ul> 
58.  
59. <！-- 二級下拉菜單結束 --> 
60.  
61. </li> 
62.  
63. </ul> 
64.  
65. </div> 

這樣,我們的下拉菜單就制作完成了,只要適當的美化一下即可,至于CSS代碼,相信聰明的你肯定可以寫出來.