Multi-level Navigation Plugin插件使用方法与教程

很多人希望让自己的wordpress导航栏能够实现单多级显示、下拉显示、弹出式显示,因为如果你的内容和分类足够多的话,这些下拉菜单都是必须的。今天免费资源部落介绍的Multi-level Navigation Plugin插件就可以帮你实现一切下拉菜单。

Multi-level Navigation Plugin插件作用就是可以将导航菜实现任意级的下拉菜单显示,你可以将你存档、分类、页面、友情链接、评论等作为导航菜单。另外,一个很好的设计就是你可以在直接后台设置导航的css从而让导航栏与你的主题相适应。

Multi-level Navigation Plugin插件使用方法与教程:

一、首先下载:Multi-level Navigation Plugin插件,你可以在wordpress后台添加插件中搜索下载,也可以点击下载:Multi-level Navigation Plugin

二、下载完成后将插件上传上wordpress博客的plugin目录下,然后进入“插件”选项中将Multi-level Navigation Plugin激活就可以使用了。

三、激活后,进入“设置”选项后你就可以你就可以看到“Multi-level Navigation”的设置项了。点击进入吧。

这里的Introduction、Appearance、 menu contents、Setting四个选项,分别表示插件介绍、外观设置(这里可以直接设置css)、下拉菜单内容和参数设置。

四、首先找到你的主题的header.php文件,在你的想要的实现导航栏的地方插入语句:

<?php if (function_exists(‘pixopoint_menu’)) {pixopoint_menu();} ?>

这段语句就是用来调用Multi-level Navigation插件在你的网页头部插入一个导航栏层,然后实现下拉菜单样式,由于层与层之间的关系,因些你可以将该语句放到任意一个你实现导航功能的地方,比如侧边栏或者底部也行。

五、menu contents设置。现在进入menu contents设置导航显示的内容了。这里有Main menu contents、Second menu contents、Modifications、Categories settings、Number of recent posts and comments、Custom HTML code等设置项目。

1、Main menu contents是用来设置你的主导航栏的内容的,你可以设置10个Menu Item,然后在Item中你可以选择任何内容作为你的下拉菜单的内容,包括了分类、pages、链接、评论、存档等。另外你还可以自定义,用来生成在wordpress没有页面导航。

2、Second menu设置和Main menu contents一样的,如果你的网站有两个导航栏的话,就可以在这里设置了。

3、Modifications中:

a、Title可以设置显示的标题,如果将“home”你可以改成“免费资源部落主页”等。Title URL’s你可以设置你的导航栏栏目的链接,一般不用修改,保持为空就行了。

b、Pages/categories to exclude用来包含或者去除某些下拉菜单选项。例如不想把免费php空间显示在免费空间的下拉菜单中,就可以在Categories to include or exclude中选择免费php空间,然后选择exclude就可以了。

c、Pages/categories depth用来显示你的下拉层级的。top level only只显示一层,没有下拉菜单。1 level of children显示你的一级子分类,例如免费wordpress教程是免费教程中的一级子分类,选择1 level of children就会显示出来。

2 level of children显示二级子分类。如果在免费wordpress教程中再设一个子分类话,如插件教程,那么当你的鼠标移动到免费wordpress教程时将会出现插件教程分类。

infinite表示显示层级不受限制。

4、Categories settings中Category order显示子分类排列的顺序,你可以以设置为按name、id的升序或者降序来排列。Show empty categories表示显示没有文章或者子分类的分类栏目。

5、Custom HTML code用来自定义你导航栏代码的。如果你Multi-level Navigation Plugin与你的主题不兼容话,你可以在这里自己编写代码直接在你的主题实现导航栏,这个可能需要懂得html知识。

下面是免费资源部落使用Multi-level Navigation Plugin插件制作的wordpress导航栏下拉菜单样式:

六、Setting参数设置。

1、Speed of fade-in effect下拉菜单显示的速度,如果你是一个懒洋洋的人,你可以设置为slow,这样你的下拉菜单会很慢地打开,如果你是一个爽快的人,你可以设置为instant,下拉菜单会迅速打开。

2、Sensitivity敏感度设置。high表示鼠标移动到导航栏时就会弹出下拉菜单,依据个人喜好来设置吧。

3、Enable keyboard accessible menu这个可以实现浏览者使用键盘的快捷键来实现下拉菜单。

4、Add a second menu?这个是可以用来设置两个导航栏的。例如你可以看到有的网站上面一个导航栏的肉容是page类的,下面一个导航栏是Categories类的,一个比较有代表的就是:WordPress 非官方中文站。

七、appearance是用来设置导航的css的。如果你知道如何设置css可以点击进入PixoPoint Multi-level CSS Generator 来自己制作css,将制作好的css代码放在appearance就可以了。

如果你不懂不方面的知识话,免费资源部落将为你详细解释一下appearance默认的css样式,你只要稍微做一个修改,就可以改变导航栏的样式。下面是默认的css代码:

#suckerfishnav {background:#99CCFF url(”../multi-level-navigation-plugin/images/suckerfish_green.png”) repeat-x;font-size:14px;font-family:verdana,sans-serif;font-weight:bold; width:100%;}#suckerfishnav, #suckerfishnav ul {float:center;list-style:none;line-height:23px;padding:0;border:1px solid #aaa;margin:0; width:100%;}#suckerfishnav a {display:block;color:#0080C0;text-decoration:none;padding:0px 10px;}#suckerfishnav li {float:left;padding:0;}#suckerfishnav ul {position:absolute;left:-999em;height:auto; width:151px;font-weight:normal;margin:0;line-height:1; border:0;border-top:1px solid #99CCFF; }#suckerfishnav li li { width:149px;border-bottom:1px solid #99CCFF;border-left:1px solid #99CCFF;border-right:1px solid #99CCFF;font-weight:bold;font-family:verdana,sans-serif;}#suckerfishnav li li a {padding:4px 10px; width:130px;font-size:12px;color:#99CCFF;}#suckerfishnav li ul ul {margin:-21px 0 0 150px;}#suckerfishnav li li:hover {background:#99CCFF;}#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {color:#FFFFFF;}#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {color:#FFFFFF;}#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {color:#FFFFFF;}#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {left:-999em;}#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {left:auto;background:#00CC66;}#suckerfishnav li:hover, #suckerfishnav li.sfhover {background:#5E7AD3;}

1、“../multi-level-navigation-plugin/images/suckerfish_green.png” 这一句表示导航栏的背景图像,在Multi-level Navigation Plugin的image文件夹中作者提供了很多的图片,你可以自由地选择。

2、{color:#FFFFFF} 是用来设置导航栏下拉菜单的字体颜色的,免费资源部落将它设置为白色的。

3、5E7AD3这些是用来设置下拉菜单选项的背景颜色的。大家可以依据个人喜好,自己修改吧。

这是你看到我的css代码:

  1. #suckerfishnav {
  2. background:#333 ;
  3. font-size:14px;
  4. font-family:verdana,sans-serif;
  5. font-weight:bold;
  6. width:100%;
  7. }
  8. #suckerfishnav, #suckerfishnav ul {
  9. float:left;
  10. list-style:none;
  11. line-height:40px;
  12. padding:0;
  13. border:1px solid #aaa;
  14. margin:0;
  15. width:100%;
  16. }
  17. #suckerfishnav a {
  18. display:block;
  19. color:#ffffff;
  20. text-decoration:none;
  21. padding:0px 15px;
  22. }
  23. #suckerfishnav li {
  24. float:left;
  25. padding:0;
  26. }
  27. #suckerfishnav ul {
  28. position:absolute;
  29. left:-999em;
  30. height:auto;
  31. width:121px;
  32. font-weight:normal;
  33. margin:0;
  34. line-height:1;
  35. border:0;
  36. border-top:1px solid #666666;
  37. }
  38. #suckerfishnav li li {
  39. width:119px;
  40. border-bottom:1px solid #666666;
  41. border-left:1px solid #666666;
  42. border-right:1px solid #666666;
  43. font-weight:bold;
  44. font-family:helvetica,sans-serif;
  45. }
  46. #suckerfishnav li li a {
  47. padding:10px 10px;
  48. width:90px;
  49. font-size:12px;
  50. color:#fff;
  51. }
  52. #suckerfishnav li ul ul {
  53. margin:-33px 0 0 120px;
  54. }
  55. #suckerfishnav li li:hover {
  56. background:#fff;
  57. }
  58. #suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
  59. color:#333;
  60. }
  61. #suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
  62. color:#333;
  63. }
  64. #suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
  65. color:#fff;
  66. }
  67. #suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
  68. left:-999em;
  69. }
  70. #suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
  71. left:auto;
  72. background:#333;
  73. }
  74. #suckerfishnav li:hover, #suckerfishnav li.sfhover {
  75. background:#ffffff;
  76. }

Leave a comment

You must be logged in to post a comment.