针对 Wordpress 模板导航栏2级悬浮菜单的一个很好的解决方案
不知道你是否看的懂标题…
随着 Wordpress 越来越大众化，随着大家博客内容越来越丰富，我们对它的要求也是越来越高、越来越苛刻，很明显的一点就是很多人开始觉得 Wordpress 模板原始的导航菜单（只有1级）样式过于单调，输出的内容也有限，于是如何方便的输出2级导航栏就成为了一个大众化的需求。
之前，我针对 D&Z Theme 已经有所尝试——《给 D&Z Theme 增加一个额外的悬浮菜单 》，其方法是基于小胖的《JavaScript下拉菜单》。此方法虽然可行，但存在一个弊端——2级导航菜单需要手动添加和更新！这样做的话增加了不少工作量，而且对于 Wordpress 新手来说的话也有不小困难…
在这篇文章里，我将分享一个同样是使用 Javascript 来生成2级导航菜单的方法，此方法弥补了上述的缺陷。原文详情见这里：
http://www.htmldog.com/articles/suckerfish/dropdowns/
小胖的方法之所以需要手动更新 Wordpress 导航栏，是因为他的代码里给“父 li ”里写入了“onmouseover” 和 “onmouseout” 这2个行为：
1 2 3 4 5 6 7 8 9 10 11 12 | <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">父栏目1</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> <li><a href="#">子菜单3</a></li> <li><a href="#">子菜单4</a></li> </ul> </li> <li><a href="#">父栏目2</a></li> <li><a href="#">父栏目3</a></li> <!-- etc. --> |
然而 Wordpress 输出页面导航链接的函数是：
1 | <?php wp_list_pages('sort_column=menu_order&depth=1&exclude=&title_li=');?> |
其表现出来的形式为：
1 2 3 4 | <li><a href="#">父栏目1</a></li> <li><a href="#">父栏目2</a></li> <li><a href="#">父栏目3</a></li> <li><a href="#">父栏目4</a></li> |
也就是说这个函数输出的是一排带链接的 “li” ，因此我们就不可能把 “onmouseover” 和 “onmouseout” 这2个行为写入到函数中并让“父 li” 输出，如果要做2级导航菜单的话就需要把每个 “li” 都独立出来，这样就相当麻烦了…
不过 Suckerfish 的 Javascript 就解决了这个，它无需在“父 li” 中写入额外的内容，这样就能很好的运用到 Wordpress 中来。那么 Wordpress 模板导航栏部分的代码我们可以这样写：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <script type="text/javascript"> sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); </script> <div class="nav"> <ul id="nav"> <li class="page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="网站首页">网站首页</a></li> <?php wp_list_pages('sort_column=menu_order&depth=2&title_li=');?> </ul> </div> |
前半部分调用的就是 Javascript 代码，后半部分直接输出导航栏，注意到第19行中的“depth=2”，这个参数用于控制输出2层导航栏，也就是只会输出一层子菜单，改成3的话就会输出2层子菜单，以此类推。
针对上述代码，我们还需要相应的样式来控制子菜单的隐藏和显示（必须）：
1 2 3 4 5 6 | #nav li:hover ul ul, #nav li.sfhover ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { left: auto; } |
其它的 CSS 样式，比如：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | #nav { } #nav ul { } #nav li { } #nav li a { } #nav li a:hover { } #nav li ul { } #nav li ul li { } #nav li ul li a { } #nav li ul li a:hover { } |
就需要根据主题的整体样式来决定了。
个人感觉，对于 Wordpress 主题制作者而言，这是个不错的解决2级导航菜单的方案，对于有一定 HTML 和 CSS 基础的朋友来说，也能很方便的对模板导航栏进行改造。
希望这个方法能给大家带来便利 
zEUS.
- 原文链接:
- 转载原创文章请注明:
Name : zEUS.
好深奥，，根本看不懂……www.aiv1.cn寻求帮助。。让浏览菜单鼠标滑过弹出……
这么早的文章我都找出来了，哈哈！
很实用的方案。
除了截图，能不能有个案例链接啊？
不错
good! 学到东西了
学习中，真的好
学习了！惊喜什么时候奉献啊？哈哈！
打算等 D＆Z Theme 升級到相容於 2.7 新版的時候，再針對這個部份加強：）