纯代码给wordpress制作二级多级菜单特效

为了改进博客体验，最近对本站样式进行了整顿，除了换配色以外，还增添了新功能，比如说二级下拉菜单的实现。二级或者多级菜单的实现不仅改进了用户体验，同时能在最小的范围内展示更多菜单选项，杜绝铺张浪费，弘扬充分利用。具体效果可以把鼠标移到本站的菜单选项上，包含二级菜单的选项会自动下拉出二级菜单。

现在来说说制作方法： 首先在自己的wordpress主题的functions文件中删掉原有的菜单功能代码或者直接加入这段代码; <?php if ( function_exists('register_nav_menus') ) {register_nav_menus(array('primary' => '主导航菜单'));}?> 注：一定要要在<?php ?>外面加。 然后找到主题调用菜单的php代码，如果是原始的一般为 <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> 把它删掉，换成： <div id="menu"><?php if(function_exists('wp_nav_menu')) { wp_nav_menu(array('theme_location'=>'primary','menu_id'=>'nav','container'=>'ul')); } ?> </div> 注意：确保所加这段代码外围没有其它div包围，否则会被外围div限制。 接下来就是添加下拉js功能代码，把以下代码加入主题js文件中： jQuery(document).ready(function($) { $('#nav li').hover(function() { $('ul', this).slideDown(200)}, function() {$('ul', this).slideUp(300)});}); 最后，就是css样式美化了。具体要什么样的效果，充分发挥自己的想象力，css可以做到的。 #menu {position:relative;width:99%;margin:0 5px 0 5px;height:36px;background: #f6f6f6 url("images/jtyu.jpg");} #menu li{border-right:0px #ace solid;} #nav{margin-left:30px;width:900px;height:36px;} #nav li{font-size:14px;width:100px;line-height:30px;float:left;background: #f6f6f6 url("images/iol.jpg");border-bottom:0px #fff solid} #nav li a{line-height:36px;color:#fff;text-align:center;display:block;background:url("images/beg.png") no-repeat;margin:0;} #nav li a:hover{background:url("images/oilu.png") no-repeat center;color:#f03;} .sub-menu {height:36px;float:left;position:absolute;text-align:center;display:none;} .sub-menu a {border-top:0px #fff solid;height:36px;color:#fff; text-decoration:none; line-height:36px;  text-align:center; padding:0 20px; display:block; _width:48px;} 注：其中sub-menu就是二级菜单的样式