如何为WordPress主题添加二级子导航菜单

目前wordpress已经支持自定义设置二级子导航菜单。即跟后台“外观”>“菜单”中将设置好的菜单项向右拖拽,即可将该被拖拽到右边的菜单项转换成位于其上菜单项的子菜单项。如图所示:

话虽如此,但其前提条件是首先你所使用的主题导航必须支持生成子菜单。如果你按照上图所示的方法设置了子菜单,但是在前台却没有任何反应。那么就说明你使用的主题不支持此功能。

其实想要不支持该功能的主题加上这个功能也很简单。为了满足浏览器兼容问题,我们可以运用jQuery库来实现这一功能。当然,首先要确保你的主题已经加载jQuery库。然后在你的导航代码下(一般在header.php文件中),添加如下代码(此段代码别忘了用<script></script>标签包起来):

jQuery(document).ready(function($) {$('#nav ul li').hover(function() {$('ul', this).slideDown(300)},function() {$('ul', this).slideUp(300)})});

其中#nav是你的主题中包含调用导航代码的div块的id。我用的是id=nav,所以在这里写入#nav,如果你的主题中导航块用的是其他id,请更换。

括号中的300简单理解就是子菜单下展和上收时候的速度(slideDown是向下,slideUp是向上),数值越大速度越慢。

添加这段代码后,你的子菜单项会继承主导航中的CSS,比如北京字体,字号等。如果需要使子菜单的CSS不同于主导航,可另外添加控制子菜单项的代码。举例,加入你要改变子菜单项的背景颜色(白色),可以将以上代码写成:

jQuery(document).ready(function($) {$('#nav ul li').hover(function() {$('ul', this).slideDown(300)$('ul', this).css("background-color", "#fff")//将背景改为白色},function() {$('ul', this).slideUp(300)})});

其他修改可以以此类推。另外,这段代码也可以另存为一个js文件,文件中不必加入<script>标签,然后在主题中适当位置引入这个js文件就可以了。

发表评论

13 条回应

  1. 溦风说道:

    貌似没用啊,加完后还是没有子菜单

  2. 新西德雅说道:

    你的评论框不错啊

  3. 老罗说道:

    很多主题都支持二级菜单的。

  4. 从良未遂说道:

    这个必须要支持一下,话说博主的主题也不错,挺简洁

    1. 小雨说道:

      哈哈,多谢!

  5. 小A说道:

    [欢迎] 新手必看哦~

    1. 小雨说道:

      哈,你也来冒充新手了。

  6. hiswing说道:

    我觉得你的主题有一个地方非常不错,就是右下角的返回顶部的箭头,边框的颜色与底部的颜色完全一致,当移动到最下面的时候看上去就是一个白色的箭头。很精致。

    1. 小雨说道:

      哈哈,感觉这样好看所以就做成这样了。不过每次点到分类页面这张图就挂,我实在不明白,你知道这可能会是什么原因么?

  7. www.tackming.com说道:

    终于找到了!学习了!谢谢!

  8. Win8迷说道:

    [大笑] 新手必看 [欢迎]

    1. 小雨说道:

      不过你应该算老手才对 [大笑]

  9. 篮球比分说道:

    沙发,谢谢分享咯