wordpress博客实现导航栏子分类下拉菜单效果

wordpress博客实现 导航栏子分类 下拉菜单效果,你的文章分类就会有很多了，每个分类下面还有五六个子分类，在 导航栏就会无法全部放下，当然也完全也没有这个必要。

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

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

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

<li><a href="http://www.mianfeimoban.com"> 免费模板</a></li>

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

<li><a href="http://www.mianfeimoban.com">免费素材</a></li>

<li><a href="http://www.mianfeimoban.com/">免费代码</a></li>

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

<li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)">

<a href="http://www.mianfeimoban.com/">免费模板</a>

<ul>

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

<li><a href="http://www.mianfeimoban.com/">免费素材</a></li>

<li><a href="http://www.mianfeimoban.com/">免费代码</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].οnmοuseοver=function() { this.className+=" sfhover"; } sfEls[i].οnmοuseοut=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主题来进行相应的颜色、间距等改变。

原文地址:http://www.mianfeimoban.com/wordpress_jc/10383.html 欢迎转载!