網生@誌 | zEUS.'Blog

首页 » Wordpress研究 » 2008-12-18 »

针对 WordPress 模板导航栏2级悬浮菜单的一个很好的解决方案

字体大小:T | T

不知道你是否看的懂标题…

随着 WordPress 越来越大众化,随着大家博客内容越来越丰富,我们对它的要求也是越来越高、越来越苛刻,很明显的一点就是很多人开始觉得 WordPress 模板原始的导航菜单(只有1级)样式过于单调,输出的内容也有限,于是如何方便的输出2级导航栏就成为了一个大众化的需求。

之前,我针对 D&Z Theme 已经有所尝试——《给 D&Z Theme 增加一个额外的悬浮菜单 》其方法是基于小胖《JavaScript下拉菜单》。此方法虽然可行,但存在一个弊端——2级导航菜单需要手动添加和更新!这样做的话增加了不少工作量,而且对于 WordPress 新手来说的话也有不小困难…

2级菜单

在这篇文章里,我将分享一个同样是使用 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.

« »

已经有21人发表了评论

  1. 好深奥,,根本看不懂……www.aiv1.cn寻求帮助。。让浏览菜单鼠标滑过弹出……

  2. 这么早的文章我都找出来了,哈哈!

  3. 除了截图,能不能有个案例链接啊?

  4. 学习了!惊喜什么时候奉献啊?哈哈! 😯

  5. 打算等 D&Z Theme 升級到相容於 2.7 新版的時候,再針對這個部份加強:)

发表您的看法

TOP COMMENTS BOTTOM