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為父菜單項，例如：

   ,"_blank",null,"detrox.gif",false,"detrox's homepage    on programming");建立了一個main的菜單項，又如

   ,"_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 為菜單背景層樣式

想看源代碼？點這裡下載下傳吧

<a href="http://download.csdn.net/source/726478">http://download.csdn.net/source/726478</a>