眾所周知，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)。

更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄