8.5.4　教程

既然已经了解了创建导航菜单的基础知识，下面介绍如何实现它。在这个教程中，你将添加CSS和JavaScript，从而将本书8.5.1节所介绍的基础的HTML菜单列表转换为一个导航栏。

注意：参见本书1.3节以“注意”部分以获取如何下载教程文件的信息。

1.在文本编辑器中打开chapter08文件夹下的文件menu.html。

这个文件包含了链接的一个项目列表，这个项目列表将转换为一个导航栏。为了看看没有任何JavaScript代码它看起来是什么样子，第一步是附加该插件的文件。

2.单击＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞之后的一个空行，并且输入：

＜script src="../_js/nav1.1.min.js"＞＜/script＞

这会把jQuery导航插件链接到该页面。现在，你将能够添加程序了，我们已经提供了带有$（document）.ready（）函数的一组＜script＞标签。

3.单击$（document）.ready（）函数中的空行，并且添加如下粗体所示的代码：

$（document）.ready（function（）{

$（"#navigation"）.navPlugin（{

'itemWidth'：150，

'itemHeight'：30

}）；}）；

要激活这个菜单，首先使用jQuery来选择用于主导航栏的＜ul＞标签，在这个示例中，该标签拥有一个ID navigation，因此，代码$（'#navigation'）会选择该标签，并且.navPlugin（）将jQuery Navigation插件编程应用于这个菜单。

为了控制该插件，我们将一个对象直接量作为参数传递。该插件的选项并不多，但是，最重要的两个选项是itemWidth和itemHeight，它们控制着按钮的宽度和高度。你不能为菜单上的每个按钮设置不同的宽度和高度，因此，确保提供一个宽度和高度能够放得下拥有最多文本的按钮的所有内容。也可以针对如何显示菜单来添加效果。

4.编辑刚刚添加的代码，以使其看上去如下面的代码所示（添加粗体显示的代码）：

1$（document）.ready（function（）{

2$（'#navigation'）.navPlugin（{

3'itemWidth'：150，

4'itemHeight'：30，

5'navEffect'：'slide'

6}）；

7}）；

别忘了在第4行的30后面加上逗号。navEffect选项控制了菜单在页面上如何显示。通常，它们只是弹出到视线中，但是，通过一个'slide'或者'fade'的值，你也可以让菜单从下面滑入视线中，或者让其淡入视线中。也可以控制菜单显示和消失的速度。

5.编辑这段代码，以使其看上去如下面的代码所示（添加粗体所示的代码）：

1$（document）.ready（function（）{

2$（"#navigation"）.navPlugin（{

3

'itemWidth'：150，

4

'itemHeight'：30，5

'navEffect'：'slide'，

6

'speed'：250

7}）；

8}）；

别忘了添加第5行中'slide'后面的逗号。Speed选项控制以毫秒为单位来设置，因此，250意味着250毫秒或者1/4秒，这是很不错的设置值。更大的数字将会使得菜单显得迟缓而不灵活。

6.保存页面并且在浏览器中预览。

现在，你应该有了一个功能完整的导航栏了。这很简单。查看一下文件中的CSS，看看这些按钮是如何格式化的，并且尝试不同的CSS属性来定制该菜单的外观。教程complete_menu.html的第一个完整版本位于chapter08文件夹下。

插件警告用于增强页面导航的其他jQuery插件

jQuery Navigation插件简单而高效，但是，还有很多其他的jQuery插件可以用于创建更高级的导航。

·DD Mega Menu插件（http：//dynamicdrive.com/dynamicindex1/ddmegamenu.htm）不仅是允许我们创建下拉菜单，而且可以下拉进入视线的整个＜divs＞。想象一下，当鼠标光标放在一个按钮上的时候，一个导航栏将整个内容都滑入视线范围。通过这种方式，我们可以隐藏内容，但是当某个鼠标光标位于一个菜单按钮上的时候，就显示这些内容。

该插件也支持常规的下拉式菜单。

·jqDock插件（www.wizzud.com/jqDock/）允许我们模拟Mac的Dock，这是跨越屏幕底部的一个带状图像，它随着你的滚动而增大。这是一种有趣的视觉效果。

如果这些插件还不能引发你的兴趣，查看一下位于www.noupe.com/jquery/45-jquery-navigation-plugins-and-tutorials.html的45种jQuery导航插件的详细列表和教程。