注：毕业设计和工作中多次接触到这个Dynarch Navigation Bar，其文档是英文的，但因一些原因，在这里翻译了一下它的一小部分，原文地址是：http://www.dynarch.com/demos/NavBar/，如有不当之处还请各位读友指正。
Dynarch导航栏
- 安装说明 - 如何安装在您的网站上。
- 定制 - 改变外观和感觉。
- 支持 - 如果发生什么错误，请与我们联系。
License许可
请阅读在这里的许可文本。
Navbar的概况
我们的DHTML导航栏是一个多用途的类似Windows XP的资源管理器菜单的DHTML“组件”（见样品）。
特征
- 支持广泛范围的浏览器。
- 此外，外观是可定制的，只需要改动一个CSS文件，而不必须触及JavaScript代码。
- 用户可以根据他的需要折叠/展开菜单的部分。
- 依赖于网页标准。它不依赖于专有的浏览器的功能，同时如果它们可用时，充分利用一些。
- 提供高质量的动画和淡入淡出效果。如果不想要，动画可以禁用，要么完全或限制在某个水平。
- 菜单部分可以嵌入普通HTML代码。
- （菜单）项目在单击时可以执行定制JavaScript代码。
- 当菜单是隐藏的时，它扩大了可用于其他网页的空间。
- 它会在一个cookie中记住它的状态，并在用户的回顾该网页时自动恢复。因此，开发人员并不需要在服务器端这样做了。
- 2个工作模式：一次允许多个（菜单）节点被展开，或只有一个（菜单）节点被展开。
- 某些特征的配置可不需要重新装载和重建菜单（因此，没有一个网页被重新加载）。他们将被保存在Cookie中。
- 允许菜单选项带图标。如果一个图标不存在，将会使用'»'来代替。
- 允许使用带有alpha-opacity的png图标，在IE浏览器中也可以。
- 可以显示工具提示。
- 不使用框架。
- 降低了网页的文件大小，因为创建菜单的代码可以被放进一个JavaScript文件，该文件是将会被浏览器缓存。
- 菜单可以从服务器端脚本动态生成（在网页显示时）。
Browser support浏览器支持
- Windows中的Internet Explorer 6.0 - 出色的支持
- Windows中的Internet Explorer 5.5 - 良好的支持
- Windows中的Internet Explorer 5.0 –能工作，但没有png方式
- Mozilla ， Firefox ，其他Gecko-s（任何平台） - 出色的支持
- Opera7（任何平台） - 很好的支持，没有淡入淡出
- MacOSX的Apple Safari - 出色的支持
- Linux的Konqueror -良好的支持
由于大多数Web浏览器，甚至新的，默认工作在兼容模式（也称为QUIRKS模式），以便能够正确显示旧的网页，Navbar需要您在网页上声明为严格的DOCTYPE。这引导浏览器切换到标准的执行模式，Navbar将在QUIRKS模式不能正常工作。
安装说明
1、从Navbar的发布包中复制“navbar”目录到您的Web服务器，例如使用FTP客户端。 If you copied it directly in your document root then a URL like the one below would be valid and lead to the main JS file:如果您直接复制它到您的文档根目录下，因此像下面一样的一个网址将是有效的，并引导主要的js文件：
http://www.yourdomain.com/navbar/navbar.jss
在这种情况下， Navbar的路径将是“/navbar” （红色段）。因为Navbar使用路径来寻找控制图标，因此要在产生菜单之前指定它。
请注意，有些Web服务器或浏览器可能不认识.jss扩展名（这的确是一个非标准的扩展名），因此将无法传递正确的“content type”。如果您遇到任何问题，请重命名该文件为：“navbar-all.js”，并在<script>标记中替换并载入该文件。
2、创建一个“setupmenu.js”文件。你可以把它放在任何你想存放的地方，没有必要把它放在的/navbar的路径下。此文件将包含初始化和生成菜单的代码，以下是一个标注了的范例，对于一个完整的例子，您应该查看发行包中的“setupmenu.js”源文件，也可看看这个网页的源文件。
_NavBar_url = "/navbar";
// 用于禁用当前页面功能的助手函数
function L(label) {
if (_NavBar_pageID.toLowerCase() == label.toLowerCase())
label = "!" + label;
return label;
}
var menu = new NavBar(document.getElementById("content"),
document.getElementById("beforemenu"),
document.getElementById("aftermenu"));
// 开始生成（添加顶部控制按钮）
menu.openMenu();
// 一个菜单项目
new NavSection(
menu, // 父菜单
"a menu", // 项目标签
[
[ L("Home"), "home.html", "Homepage", "images/home.png" ],
[ L("Products"), "products.html", "Our products", "images/products.png" ],
[ L("Label"), "url", "A tooltip", "images/icon.png" ]
]
);
// 设置一些选项
menu.prefs["animation"] = 3; // "bloatware" ;-)
menu.prefs["auto-hide"] = true; // 自动隐藏
// 结束生成
menu.generate();
|
一些标注：
- 如果一个到图片的路径是相对（即“images/home.png”），那么它将相对到您的网页，而不是/navbar的路径。
- 您可以使用PNG图标。包括在Internet Explorer，变化的opacity将可以工作。
- 所有定制选项的列表（如menu.prefs[“animation”]）见定制信息。
3、正如您从上述代码所注意到的，我们创建了一个标记为“a menu”名字的单个项目的菜单，并链接到页面“home.html”， “products.html”。每个网页应具有以下结构：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!-- DOCTYPE 是很重要的，不要忘记了 -->
<html xmlns="http://www.w3.org/1999/xhtml"
style="padding: 0px; margin: 0px">
<head>
<title>yourwebsite.com homepage</title>
<!-- 包含主要的脚本 -->
<script type="text/javascript" src="/navbar/navbar.jss"></script>
<script type="text/javascript">
_NavBar_pageID = "Home"; /* 当前页的菜单标记*/
</script>
<style type="text/css">
/* 提取导航栏的样式 */
@import url(/navbar/navbar.css);
</style>
</head>
<body>
<div id="beforemenu">
[...] 显示在导航栏中的内容，位于菜单前面 [...]
</div>
<div id="aftermenu">
[...] 显示在导航栏中的内容，位于菜单后面 [...]
</div>
<div id="content">
<div>
[...] 这里放置你包含的页面内容 [...]
</div>
</div>
<!-- 为了能够生成菜单，在这里加载setupmenu -->
<script type="text/javascript" src="setupmenu.js"></script>
</body>
</html>
|
菜单将建立在id“content”的DIV层里面。其他的两个DIV层将被移到导航栏中，并且放在菜单的前面和后面，同时它们也是可选的。
Navbar的定制
外观是完全可通过改变CSS文件而定制的。除此之外，有几个自定义选项，需要一些JavaScript代码。假如您是使用下面的命令创建的菜单：
var menu = new NavBar("content");
|
您可以修改下列自定义选项：
1. menu.prefs["animation"] = 0 | 1 | 2 | 3
意思是“0”为没有所有的动画，“1”为仅是项目的动画，“2”为菜单栏的动画，以及“3”为“膨胀”动画（当隐藏菜单时，整个网页将产生动画）。我强烈建议使用“2”（默认值） 。
2. menu.prefs["mono-section"] = true | false
当mono-section的值为true时，将是一次只有一个项目可见（被展开）。选择另一部分将隐藏当前可见的部分。
3. menu.prefs["generate-anim"] = true | false
如果这个值是true的话，那么菜单在启动时会显示动画。
4. menu.prefs["auto-hide"] = true | false
如果这个值是true的话，菜单将会是一个“自动隐藏”的菜单，意思是当鼠标光标鼠标光标离开菜单区域时，菜单将自动隐藏。
5. menu.prefs["tooltips"] = true | false
如果这个值是true（默认）的话，导航栏将显示工具提示。
6. menu.prefs["icon-width"] = 20
menu.prefs["icon-height"] = 14
允许您设定图标的尺寸。如果您提供了不同尺寸的图片，它们将被缩小，以满足上面两行配置的要求。
7. menu.prefs["link-prefix"] = "/foo/bar/"
如果将此选项设置，则各个菜单所指向的链接都将加上特定前缀（例如：“/foot/bar/” ）。
8. menu.prefs["cookie-path"] = "/bar/foo/"
设定菜单存储的cookie的路径。Cookie用于在紧接后的请求中记住菜单的状态。
9. menu.prefs["cookie-exp"] = 15
配置Cookie过期时间。如果没有设置（默认），则cookie将直到关闭浏览器（在会议结束时）才过期。上面的例子说明cookie将在15天后过期。
10. menu.prefs["link-target"] = "_blank"
设定在菜单中链接的target属性。这应该是一个frame的名称。如果你想在当前窗口/帧中打开所有链接，就请不要设置。
11. menu.prefs["nb-frames"] = 15
menu.prefs["ns-frames"] = "auto"
导航栏（nb-）或菜单项目动画（ns-）的帧数。这个数字越高，动画的速度就越慢。如果设为“自动” （默认），帧的数目将基于菜单项目的高度来计算。
12. menu.prefs["nb-fps"] = 45
menu.prefs["ns-fps"] = 100
导航栏（nb-）或菜单项目动画（ns-）每秒将会显示的帧数。这个数字越高，动画将会越平滑，但CPU的负载就会越高。其默认值应该对于大部分系统都是不错的。
13. menu.prefs["home-href"] = "http://dynarch.com/mishoo/menubar.epl"
menu.prefs["home-title"] = "NavBar project page"
menu.prefs["home-text"] = "NavBar"
这个首选项可让您定义将会显示在头部/尾部和它的工具栏提示的链接。上面的例子显示了默认选项。
14. menu.prefs["no-controls"] = false
设置为true，为了隐藏“全局菜单控制”，即“+”，“-”按钮操作所有菜单项目，以及左/右箭头可关闭/打开菜单。
15. menu.prefs["no-disable"] = false
如果您设置为true的话，Navbar将不会禁用当前的项目。如果你想当前的项目看上去是激活的，并且没有被禁用，可在这里设置“item-disabled” （或自定义字符串），同时该项目将获得附加的字符串作为类的名称。使用这个（类名称）您可以在它的样式表中定义一个自定义外观。“item-disabled”是在navbar.css中定义的默认的类别名称，用来使得该项目看起来是“激活”的。