WordPress 3.0 菜单功能支持二级菜单

发布于：电脑网络 5,210 次践踏

可以说自带的导航菜单功能是 WordPress 3.0+ 中唯一执得让人眼睛一亮的功能了，在新做主题的过程中再一次让我眼睛亮了一亮，发现这个 WordPress 的导航菜单居然还支持二级菜单，当然要实现下拉的二级菜单功能，还是需要 jQuery 和 CSS 等的配合。下面简单介绍一下：

首先，要让你的主题支持 WordPress 3.0+，只需简单几步，把以下代码添加到 functions.php 中：

if ( function_exists('register_nav_menus') ) {
    register_nav_menus(array(
        'primary' => '导航菜单'
    ));
}

然后，在 header.php 中调用如下代码：

<?php
if(function_exists('wp_nav_menu')) {
    wp_nav_menu(array('theme_location'=>'primary','menu_id'=>'nav','container'=>'ul'));
}
?>

这里就不详细介绍 wp_nav_menu() 的参数了，具体可以看看官方文档的介绍。接下来，就可以在 WordPress 后台控制面板的菜单中看到菜单选项了，只要拖动模块至一级菜单下就会形成二级菜单，甚至三级菜单，就像拖动小工具里的模块一样操作方便。如图：

根据以上操作步骤，可以打印出如下的 html：

<ul id="nav">
    <li><a href="">分类 1</a></li>
    <li><a href="">分类 2</a></li>
    <li><a href="">分类 3</a>
        <ul class="sub-menu">
            <li><a href="">分类 3.1</a></li>
            <li><a href="">分类 3.2</a></li>
            <li><a href="">分类 3.3</a></li>
        </ul>
    </li>
    <li><a href="">分类 4</a></li>
</ul>

可以看到一个二级菜单的 DIV+CSS 的模型已经展现出来了，剩下的就是配上 CSS 和 jQuery，使其产生下拉菜单的效果。

jQuery 的话，我用的是 1.2X 版本的，精致小巧，处理一个二级菜单的下拉效果绝对够用了，这个必须在以下的执行脚本之前载入，这是代码的顺序问题。

执行的脚本也非常简单，如下：

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('#nav li').hover(function() {
            $('ul', this).slideDown(300)
        },
        function() {
            $('ul', this).slideUp(300)
        });
    });
</script>

还有一些基本的 CSS：

ul,li{padding:0;margin:0;list-style:none;}
a{text-decoration:none;}
#nav li{width:100px;line-height:30px;float:left;}
#nav li a{text-align:center;display:block;width:100px;background:#ccc;}
#nav li a:hover{background:#000;color:#fff;}
.sub-menu{display:none;}

当然，以上的样式只是最基本最简单的，更多花哨的效果留给大家去挖掘吧，我还特地做了一个 DEMO，我总结了一下这个二级导航菜单的优点：1、话说原生的就是最好的，既然 WordPress 支持导航菜单，又进一步支持二级甚至多级菜单，我们为什么不利用起来呢？2、可以毫无悬念地通过 W3C 验证，因为 DIV+CSS 部分是 WordPress 的，进一步说明第一点：原生的就是最好的。3、效果好，兼容性强。有缓慢下拉的效果，这是 jQuery 的一大特点，而且在 IE、Firefox、Chrome 等各浏览器下测试都可行。4、代码简洁。这个二级导航，如果真要算代码的话，也只有 jQuery 和那一小段执行脚本了吧，而且我想 jQuery 应该大多数博客都加载了，那一小段执行脚本还在乎吗？

  1. 感谢分享，请问有没有办法让菜单代码不自动生成ul只生成LI标签，我的主题自带UL，CSS有点冲突，

    • 菜单里设置了，说明你的菜单功能已经开启了，首页不显示可能是因为在相应的文件里没有调用菜单，或者说调用出错了

  18. 已经测试，JQ好像有点问题，点开的下拉菜单会把其下的内容往下面挤（如果在二级菜单正下方有内容的话），你的演示的二级菜单下没有东西，所以看不出问题

  36. .sub-menu{display:none;} 嘿嘿，这句是亮点 ~
    话说，.slideDown的时候是不是就无视上面这句的效果了 ~
    而不需要我们再设定让它显示出来？