中财网口腔炎喷雾剂喷哪里:WordPress 3.0 菜单功能支持二级菜单
来源：百度文库 编辑：中财网 时间：2024/05/06 01:01:24
WordPress 3.0 菜单功能支持二级菜单
作者：万戈 | 时间：2010.08.29 | 2,242 次践踏 | 139 次吐槽可以说自带的导航菜单功能是 WordPress 3.0+ 中唯一执得让人眼睛一亮的功能了，在新做主题的过程中再一次让我眼睛亮了一亮，发现这个 WordPress 的导航菜单居然还支持二级菜单，当然要实现下拉的二级菜单功能，还是需要 jQuery 和 CSS 等的配合。下面简单介绍一下：
首先，要让你的主题支持 WordPress 3.0+，只需简单几步，把以下代码添加到 functions.php 中：
if ( function_exists('register_nav_menus') ) {register_nav_menus(array(
'primary' => '导航菜单'
));
}
然后，在 header.php 中调用如下代码：
if(function_exists('wp_nav_menu')) {wp_nav_menu(array('theme_location'=>'primary','menu_id'=>'nav','container'=>'ul'));
}
?>
这里就不详细介绍 wp_nav_menu() 的参数了，具体可以看看官方文档的介绍。接下来，就可以在 WordPress 后台控制面板的菜单中看到菜单选项了，只要拖动模块至一级菜单下就会形成二级菜单，甚至三级菜单，就像拖动小工具里的模块一样操作方便。如图：
根据以上操作步骤，可以打印出如下的 html：
可以看到一个二级菜单的 DIV+CSS 的模型已经展现出来了，剩下的就是配上 CSS 和 jQuery，使其产生下拉菜单的效果。
jQuery 的话，我用的是 1.2X 版本的，精致小巧，处理一个二级菜单的下拉效果绝对够用了，这个必须在以下的执行脚本之前载入，这是代码的顺序问题。
执行的脚本也非常简单，如下：
还有一些基本的 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 应该大多数博客都加载了，那一小段执行脚本还在乎吗？
标签：jQuery, WordPress, 菜单