注：畢業設計和工作中多次接觸到這個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中定義的默認的類別名稱，用來使得該項目看起來是“激活”的。