Javascript實現網頁上的多級菜單（豎著）

使用方法：
1,包含menu.js和menu.css

2,用建立主菜單類
   main = new MainMenu(10,50,"My Menu");
這裡，MainMenu的前兩個參數表示其左上方位置座標，前者為left,後者為top。第三個參數為功能表標題。
之後用MenuItem類建立功能表項目
MenuItem的源型如下：
   function MenuItem(_parent,_caption, _url, _target,_style, _image,_templatePos,_description)其中，_parent為父功能表項目，例如：

Item1 = new MenuItem(main,"Ken_xu'Page","http://blog.csdn.net/xzknet"
   ,"_blank",null,"detrox.gif",false,"detrox's homepage    on programming");建立了一個main的功能表項目，又如
   Item2 = new MenuItem(Item1,"Ken_xu'Page","http://blog.csdn.net/xzknet"
   ,"_blank",null,"detrox.gif",false,"detrox's homepage    on programming");建立一個Item1的子功能表項
其他參數：
_caption為功能表項目的標題，new當_caption為“-”時可顯示分割線。
url為其串連目的地
_target為文檔讀取的位置(同a標籤的target屬性)
_style可以添加功能表項目的特殊CSS屬性
_image為顯示在菜單文字前小表徵圖的路徑
_description為菜單注釋(同a標籤的title屬性)。
特別說明：
_templatePos 用於和Dreamweaver結合製作網頁時。當需要使用template機制，而_url又需要在網頁中相對定位時。設定_templatePos為true並且需要在dreamweaver的template中加入定位標籤：<a id = "lnkDir" href = template所在目錄相對於根目錄的位置></a>。例如：
template檔案：normalPage.dwt存在於網站的templates目錄，這需要在normalPage.dwt中加入。
<a id="lnkDir" href="../."></a>
顯示菜單：
最後使用，MainMenu的show()命令顯示菜單。
例如:
main.show()
使用者可以自訂菜單的顯示方法。通過定義fShow(id)函數.函數原型如下
fShow(id)
這裡id時將要顯示的菜單（div元素）的id號。可以通過這個id號控制功能表。定義mfShow(id)可以改變主菜單的顯示方法。
注釋：
有子功能表的功能表項目後的箭頭表徵圖檔案名稱必須為arrow.gif檔案，如果我提供的箭頭顏色和您希望的不符請更改這個檔案。
CSS樣式的定義：
定義您自己的菜單樣式，請修改menu.css，其中
.sMenuItem 為功能表項目被選中時的樣式
.nMenuItem 為功能表項目未被選中時的菜單樣式
.mnuTitle 為主菜單的標題樣式
.nMenuBk 為菜單背景層樣式

 

想看原始碼？點這裡下載吧

http://download.csdn.net/source/726478