??xml version="1.0" encoding="utf-8" standalone="yes"?>
D?/span>
许可
请阅dq里的许可文?/span>
的概?/span>
Q?/a>?a >样品Q?/span>
?/span>
_NavBar_url = "/navbar";
// 用于用当前面功能的助手函?/span>
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"));
// 开始生成(d剙控制按钮Q?/span>
menu.openMenu();
// 一个菜单项?/span>
new NavSection(
menu, // 父菜?/span>
"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; // 自动隐藏
// l束生成
menu.generate();
?/span>
Navbar外观是完全可通过改变CSS文g而定制的。除此之外,有几个自定义选项Q需要一些JavaScript代码。假如?zhn)是用下面的命o(h)创徏的菜单:(x)
<!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">
/* 提取D栏的样式 */
@import url(/navbar/navbar.css);
</style>
</head>
<body>
<div id="beforemenu">
[...] 昄在导航栏中的内容Q位于菜单前?[...]
</div>
<div id="aftermenu">
[...] 昄在导航栏中的内容Q位于菜单后?[...]
</div>
<div id="content">
<div>
[...] q里攄你包含的面内容 [...]
</div>
</div>
<!-- Z(jin)能够生成菜单Q在q里加蝲setupmenu -->
<script type="text/javascript" src="setupmenu.js"></script>
</body>
</html>
var menu = new NavBar("content");
(zhn)可以修改下列自定义选项Q?/p>
1. menu.prefs["animation"] = 0 | 1 | 2 | 3
意思是“0”为没有所有的动画Q?#8220;1”Z是项目的动画Q?#8220;2”单栏的动画,以及(qing)“3”?#8220;膨胀”动画Q当隐藏菜单Ӟ整个|页生动画)(j)。我强烈使用“2”Q默认|(j) ?/p>
2.
menu.prefs["mono-section"] = true | false
当mono-section的gؓ(f)trueӞ是一ơ只有一个项目可见(被展开Q。选择另一部分隐藏当前可见的部分?/p>
3.
menu.prefs["generate-anim"] = true | false
如果q个值是true的话Q那么菜单在启动时会(x)昄动画?/p>
4.
menu.prefs["auto-hide"] = true | false
如果q个值是true的话Q菜单将?x)是一?#8220;自动隐藏”的菜单,意思是当鼠标光标鼠标光标离开菜单区域Ӟ菜单自动隐藏?/p>
5.
menu.prefs["tooltips"] = true | false
如果q个值是trueQ默认)(j)的话Q导航栏显C工hC?/p>
6.
menu.prefs["icon-width"] = 20
menu.prefs["icon-height"] = 14
允许(zhn)设定图标的寸。如果?zhn)提供了(jin)不同尺寸的囄Q它们将被羃?yu),以满上面两行配|的要求?/p>
7.
menu.prefs["link-prefix"] = "/foo/bar/"
如果此选项讄Q则各个菜单所指向的链接都加上特定前~Q例如:(x)“/foot/bar/” Q?/p>
8.
menu.prefs["cookie-path"] = "/bar/foo/"
讑֮菜单存储的cookie的\径。Cookie用于在紧接后的请求中C菜单的状态?/p>
9.
menu.prefs["cookie-exp"] = 15
配置Cookieq期旉。如果没有设|(默认Q,则cookie直到关闭浏览器Q在?x)议l束Ӟ(j)才过期。上面的例子说明cookie在15天后q期?/p>
10.
menu.prefs["link-target"] = "_blank"
讑֮在菜单中链接的target属性。这应该是一个frame的名U。如果你惛_当前H口/帧中打开所有链接,p不要讄?/p>
11.
menu.prefs["nb-frames"] = 15
menu.prefs["ns-frames"] = "auto"
D栏(nb-Q或菜单目动画Qns-Q的帧数。这个数字越高,动画的速度p慢。如果设?#8220;自动” Q默认)(j)Q的数目将Z菜单目的高度来计算?/p>
12.
menu.prefs["nb-fps"] = 45
menu.prefs["ns-fps"] = 100
D栏(nb-Q或菜单目动画Qns-Q每U将?x)显C的帧数。这个数字越高,动画会(x)^滑,但CPU的负载就?x)越高。其默认值应该对于大部分pȝ都是不错的?/p>
13.
menu.prefs["home-href"] = "http://dynarch.com/mishoo/menubar.epl"
menu.prefs["home-title"] = "NavBar project page"
menu.prefs["home-text"] = "NavBar"
q个首选项可让(zhn)定义将?x)显C在头部/N和它的工h提示的链接。上面的例子昄?jin)默认选项?/p>
14.
menu.prefs["no-controls"] = false
讄?/strong>trueQؓ(f)?jin)隐?#8220;全局菜单控制”Q即“+”Q?#8220;-”按钮操作所有菜单项目,以及(qing)?右箭头可关闭/打开菜单?/p>
如果(zhn)设|ؓ(f)true的话QNavbar不?x)禁用当前的目。如果你惛_前的目看上LȀzȝQƈ且没有被用Q可在这里设|?#8220;item-disabled” Q或自定义字W串Q,同时该项目将获得附加的字W串作ؓ(f)cȝ名称。用这个(cdUͼ(j)(zhn)可以在它的样式表中定义一个自定义外观?#8220;item-disabled”是在navbar.css中定义的默认的类别名Uͼ用来使得该项目看h?#8220;Ȁz?#8221;的?/p>
15.
menu.prefs["no-disable"] = false
]]>