免费资源部落

现在很多人从网上下载了一些不错的wordpress主题，安装后却发现了不少的问题。这倒不是说主题不好，而是不同人的不同需要，有的时候一个再优秀的wordpress主题是无法满足所有人的需要的。

比如你准备做一个很大型的网站 ，你的文章分类就会有很多了，每个分类下面还有五六个子分类，在导航栏就会无法全部放下，当然也完全也没有这个必要。

解决这个问题比较的方法就是wordpress博客实现子分类用下拉菜单显示，当你的鼠标移到导航栏的时候，就会出现下来菜单，显示的是该分类的子分类。今天免费资源部落就为大家介绍一个手动修改wordpress博客代码来实现导航栏下拉菜单显示的方法。

首先声明这个方法比较地“土”，使用这个方法你不需要去懂得wordpress复杂的函数调用，只需要要懂得基本的html知识就可以使用了，适合新手来使用。

1、Wordpress 输出分类导航链接的函数是：<?php wp_list_categories(‘orderby=id&hide_empty=0&title_li=’); ?>，输入的页面形式就会如下演示这样了：

<li><a href="http://www.freehao123.com/category/freekongjian/">免费空间</a></li> 

<li><a href="http://www.freehao123.com/category/itteaching/">免费教程</a></li> 

<li><a href="http://www.freehao123.com/category/freedomain/">免费域名</a></li> 

<li><a href="http://www.freehao123.com/category/freemail/">免费代理</a></li>

2、而我们要实现的页面显示样式如下：

<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 

<a href="http://www.freehao123.com/category/freekongjian/">免费空间</a> 

<ul> 

<li><a href="http://www.freehao123.com/tag/mianfeiphpkongjian/">免费php空间</a></li> 

<li><a href="http://www.freehao123.com/tag/mianfeiaspkongjian/">免费asp空间</a></li> 

<li><a href="http://www.freehao123.com/tag/mianfeijingtai/">免费静态空间</a></li> 

</ul> 

</li> 

3、所以我们采用的方法就是在wordpress调用header()函数时候，先调用实现下拉菜单的javascript代码，然后直接输出导航栏的分类栏目。

首先你需要在你的header（）文件中插入以下javascript代码：

<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>

这段代码的功能就是实现鼠标移动到导航栏中的分类目录时立即弹出下拉菜单选项。

4、修改输出分类导航链接的函数。例如：你可以改成下面的演示：

<?php wp_list_categories(‘orderby=id&depth=2&hide_empty=0&title_li=’); ?>

请注意这里“depth=2”参数的作用就是用于控制输出导航栏的下拉菜单，2代表着输出你分类中一层子分类，如果你把它改成3，则表示输出你的两层子分类，大家可以依次来推。

5、将head()函数修改完毕后，剩下的工作就是修改css样式了。下面的css代码是用来控制子菜单的隐藏和显示的，这个你是一定要加上去的，否则就显示不出来效果了。

#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样式你可以参考你的wordpress主题来进行相应的颜色、间距等改变。

您或许对下面这些文章有兴趣：

• Son of Suckerfish一级下拉菜单制作方法
• Son of Suckerfish二级、三级、多级下拉菜单制作方法
• 教你自己动手制作WordPress下拉菜单
• Multi-level Navigation Plugin插件使用方法与教程
• PICT.COM免费无广告的图像、图片与照片上传空间
• 电脑日常维护方法和技巧
• Easy Timer -小巧绿色的电子闹钟、倒计时器
• Dtabs – wordpress导航栏下拉菜单插件使用方法与教程