Step 1 — 在functions.php中添加以下代码，使我们的主题撑持自界说菜单功能。

add_theme_support（‘nav-menus’）;

‘container_id’ => ‘’,

Step 2 — 添加一个顶部菜单。

if （ function_exists（ ‘register_nav_menus’ ） ） {

function （） {

‘header_menu’ => ‘Header Navigation’

）

）;

Step 3 — 把wp_nav_menu()函数放到一个自界说函数傍边.

function wper_so_menu（）{

if（function_exists（‘wp_nav_menu’） && has_nav_menu（‘header_menu’））：

wp_nav_menu（

menu_class：无序列表ul的class属性。本例中我们设置为“ddsmoothmenu”，则输入结不美观为<ul class=“ddsmoothmenu”>.....</ul>

‘menu’ => ‘Header Navigation’,

‘container’ => ‘div’,

‘menu_id’ => ‘nav’,

‘echo’ => true,

‘fallback_cb’ => ‘fallback_no_menu’,

）;

‘before’ => ‘’,

‘after’ => ‘’,

‘link_before’ => ‘’,

‘link_after’ => ‘’,

‘depth’ => 2,

<！-- 二级下拉菜单 -->

‘walker’ => new Walker_Nav_Menu（）,

‘theme_location’ => ‘’,

‘show_home’ => true

container_id： 膳缦沔的容器的id属性。如不美观设置为menu，则输出结不美观为<div id=“menu”>.....</div>

endif;

}

这里我诠释一下wp_nav_menu()函数的各个参数。这个函数的功能就是显示一个自界说导航菜单(官方文档)：

menu： 我们建树的菜单名称。本例中我们使用“Header Navigation”

},

register_nav_menus（

menu_id：无序列表ul的id属。如不美观设置为“menu-item”，则输出结不美观为<ul id=“menu-item”>.....</ul>本例中我们使用“nav”

<ul class=“sub-menu”>

array（

echo： 是否显示菜单。如不美观设置为false，则不显示菜单。

最后，我们获得如下HTML代码：

）

fallback_cb： 菜单无法显示时的提醒信息。好比：菜单未找到。

）;

before， after：包含<a&>标签容器的名称，如不美观设置为：<span>和</span>则输出结不美观为：<span><a>.....</a></span>

</li>

depth：下拉菜单的深度，本例中我们设置为：2，则只撑持两级下拉菜单。默认为0，即无限级下拉菜单。

</a>

walker： 自界说的遍历对象，挪用一个对象界说显示导航菜单。默认为 ：new Walker_Nav_Menu（）

container_class： 膳缦沔的容器的class属性。如不美观设置为nav，则输出结不美观为<div class=“nav”>.....</div>，本例中我们使用“warp”

众所周知，WordPress3.0中增添了一个很是适用便利的自界说菜单功能，这个功能可以使我们轻松的建造出多级下拉菜单，今天，笔者就经由过程一个简单的二级下拉菜单的示例来告诉列位童鞋具体怎么操作。

‘container_class’ => ‘warp’,

theme_location：后台菜单页面中包含菜单名称的容器的ID.

show_home：布尔型值，是否显示首页。

Step 4 — 在header.php中的恰当位置挪用我们的自界说函数.

Step 5 — 此刻我们的主题已经撑持一个自界说菜单了，接下来操作jQuery实现下来菜单的动画效不美观。加载jQuery库是必需地！

所用到的jQuery代码：

（function（$） {

$（function（） {

$（‘#nav li’）.hover（

$（‘ul’， this）.slideDown（200）;

function （） {

//潜匿二级菜单

}

}）;

}）（jQuery）;

<div class=“warp”>

$（‘ul’, this）.slideUp（150）;

<a href=http://www.zhuojie.net/?.com/web/2012/1008/“http://www.zhuojie.net/?=5”>

<ul id=“nav” class=“ddsmoothmenu”>

<a href=http://www.zhuojie.net/?.com/web/2012/1008/“http://www.zhuojie.net/?=3”>

<li id=“menu-item-6” class=“menu-item .... menu-item-6”>

<a href=http://www.zhuojie.net/?.com/web/2012/1008/“http://www.zhuojie.net/?=2”>

<span><em>示例页面2</em></span>

</a>

<li id=“menu-item-36” class=“menu-item .... menu-item-36”>

）;

link_before， link_ after： 包含链接文字的标签名称，如不美观设置为：<em>和</em>则输出结不美观为：<a><em>链接文字</em></a>

<span><em>示例页面5</em></span>

//显示二级菜单，括号中的数字暗示下拉菜单完全显示出来需要200毫秒。

}

</a>

<a href=http://www.zhuojie.net/?.com/web/2012/1008/“http://www.zhuojie.net/?=1”>

<span><em>实例页面3</em></span>

<span><em>文章分类1</em></span>

</li>

<a href=http://www.zhuojie.net/?.com/web/2012/1008/“http://www.zhuojie.net/?=4”>

<li id=“menu-item-54” class=“menu-item .... menu-item-54”>

<li id=“menu-item-55” class=“menu-item .... menu-item-55”>

<span><em>示例页面4</em></span>

</li>

</a>

<li id=“menu-item-56” class=“menu-item ..... menu-item-56”>

‘menu_class’ => ‘ddsmoothmenu’,

</li>

</div>

$（document）.ready（function （） {

</ul>

<！-- 二级下拉菜单竣事 -->

container： 我们建树的菜单地址容器的名称。如不美观设置为“div”，则输出结不美观为<div>.....</div>，本例中我们使用“div”。

</li>

array（

</ul>

</a>

这样，我们的下拉菜单就建造完成了，只要恰当的美化一下即可，至于CSS代码，相信聪明的你必定可以写出来。