免费资源部落

很多人希望让自己的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这些是用来设置下拉菜单选项的背景颜色的。大家可以依据个人喜好，自己修改吧。

文章出自：免费资源部落 www.freehao123.com  转载请注明出处.