中文資訊科技應用 | 首頁 | 前頁 | 交流 | 搜尋 | 地圖

JavaScript 應用：互動菜單

互動菜單是甚麼？

按一下連結，看看互動菜單是甚麼。

步驟 1：搜尋

試以關鍵詞「javascript+drop down menu」尋找有關程式。以下是其中最適用、最易用、最好用的一個：

Fuushikaden Web Workshop
http://web.singnet.com.sg/~lwtan77/mn-intro.htm

步驟 2：織網

編寫新網頁。

步驟 3：程式

1. 下載 JavaScript 程式 menu.zip（此處供下載的程式稍作修改，與 Fuushikaden Web Workshop 上的稍有分別），解壓後有五個檔案；

2. 把五個檔案都存到同一個目錄夾中；

3. 把下列語句加在網頁原始檔中的 head 之內。

步驟 4：啟動

把下列五句的起動部份加到網頁原始檔的 body 之內，至於放在 body 之中的哪兒，則由網頁計設者自行從頁面設計上考慮。

你會發覺這啟動部份有別於一般的按鈕或連結形式。但不必理會，只要有效便夠了，管它是黑貓抑或白貓還是其他呢！

步驟 5：調校

這是最重要的部份：調校有關參數。

1. 把下列語句按需要修改好：

怎樣修改呢？你會看見上文中不斷出現 AddMenuItem 一詞，而且 AddMenuItem 有以下的格式：

AddMenuItem 會根據尾隨的五項資料，決定菜單的組和外觀，這類資料一般稱為「參數」：

a) number 1：Unique Id

• 第一層的 number 1 (Unique Id)：1 表示菜單中最左方的第一欄，2 表示由左方計起的第二欄，3 表示由左方計起的第三欄，如此類推；（＝欄序，由 1 計起）
• 第二層開始的 number 1 (Unique Id) 由兩個數字決定：第一個數字與上同：1 表示菜單中最左方的第一欄，2 表示由左方計起的第二欄，3 表示由左方計起的第三欄，如此類推；（＝欄序，由 1 計起）
• 第二層開始的 number 1 (Unique Id) 的第二個數字即層次的深度，1 表示第二層，2 表示第三層，3 表示第四層，如此類推。（＝列序，由 0 計起）

b) number 2：Parent Id

• 第一層的 number 2 (Parent Id) 為 0；（＝列序，由 0 計起）
• 第二層開始的 number 2 (Parent Id) 即1 表示菜單中最左方的第一欄，2 表示由左方計起的第二欄，3 表示由左方計起的第三欄，如此類推。（＝欄序，由 1 計起）

假設要設計一個 4 欄 4 列 的菜單，菜單中各選項的 number 2 及 number 1 應作以下界定：

算法稍有複雜，但亦有其邏輯；既要應用別人編好的程式，也只得遵從該程式規定的設定了，想要任我行，便得自行編寫程式了。

c) Web Page URL：要連結的網址。

d) Label：各網址的說明。

e) Image File：各說明左方出現的圖象 (icon) 檔案；如沒有圖象，在引號內不加任何文字即可。

步驟 6：試用

把以下六個檔案都上載到伺服器上：

• 解壓後的五個檔案
• 新編寫的網頁

如何在框架中用互動菜單

見 如何在框架中用互動菜單。

如何控制互動菜單中的寬度

見 如何控制互動菜單中的寬度。