按鈕|菜單|按鈕|菜單 按鈕菜單可以在許多網站見到，比如Microsoft的SQL Server網站。當滑鼠移到功能表按鈕上時，它會浮起來，按下滑鼠鍵時功能表按鈕會向下凹陷。下圖是這種菜單的實際效果，左邊是SQL Server網站的菜單，右圖是本文執行個體。
這種菜單可以用JavaScript和CSS製作。為方便起見，這裡我們要用到ASP。本例共有六個檔案，請從本文頁面底部的連結下載這些檔案。這六個檔案是：
㈠ SamplePage.asp：這是本例顯示菜單的頁面。設所有代碼在本機伺服器inetpubScripts目錄下，則用http://localhost/Scripts/SamplePage.asp可以開啟上圖所顯示的樣本菜單。SamplePage.asp用#Include命令引用menu.asp產生菜單。
㈡ Menu.asp：調用Functions.inc中的函數產生菜單。具體調用方法參見下文說明。
㈢ Menu.css：該檔案包含了按鈕所有狀態的樣式定義。按鈕共有四種類型：正常，正常子功能表，選擇狀態，選擇狀態子功能表。其中“選擇狀態”是指按鈕文本前面帶一個圓點，子功能表是指文本縮排一定距離。每種按鈕有各種不同狀態，例如滑鼠移至上方時的浮起狀態，滑鼠按下時的凹陷狀態，等等。可以為所有按鈕的各種狀態分別定義樣式。改變這裡樣式的顏色也即改變了菜單的顏色。
㈣ Menu.js：這是用戶端指令碼代碼。這裡的代碼負責響應滑鼠事件，改變按鈕的外觀。其中RaiseButton()函數升高按鈕，DepressButton()函數壓下按鈕。
㈤ linenavdns.gif：這是高度為2 pixel的圖形，用於分隔功能表按鈕。它和< HR>差不多，但似乎更好看一點。如果改變了菜單的背景顏色，必須同時改變這個圖形的顏色。
㈥ functions.inc：伺服器端指令碼。functions.inc總共包含5個VBScript子過程，分別用來輸出前面介紹的四種按鈕和分隔線linenavdns.gif。如果在menu.css中改變了按鈕文本的顏色，同時也要改變這裡的一些函數。參見下文具體說明。
如前所述，本例實際畫出菜單的代碼在menu.asp中，下面具體說明菜單中各種按鈕的建立方法。我們已經知道，按鈕總共有四種類型，本例用到了所有這四種按鈕。前圖中最上面的一個按鈕“命令1”屬於第一種按鈕類型，用下面這行代碼建立：
call drawMenu(按鈕文本,目標URL)
實際使用時改變調用參數即可。
第二個按鈕文本“命令1-1”是縮排的（第二類按鈕），和最後一個按鈕“命令2-2”一樣，用下面這行代碼建立：
call drawSubMenu(按鈕文本,目標URL)
樣本菜單中的按鈕分隔用的是Linenavdns.gif，這個圖形可以用如下代碼加入任何兩個按鈕之間：
call drawMenuSeperator()
第三個按鈕前面有一個橙色圓點（即選擇符號，這是第三類按鈕）。這個按鈕用如下代碼加入：
call drawChsnMenu (按鈕文本,目標URL)
第四個按鈕文本縮排且帶圓點（第四類按鈕），加入該按鈕的代碼如下：
call drawChsnSubMenu (按鈕文本,目標URL)
下面說明一下如何定製菜單的顏色。顏色定製有點麻煩，這裡只說明其經過，具體請讀者自己下載代碼實驗。如果要改變菜單的背景色，首先要改變menu.asp中表格的背景色，其次是要修改menu.css中的所有的背景顏色和邊框顏色。如果改變了按鈕的文本顏色，必須同時改變functions.inc中各函數所輸出的< FONT>標記的“color=”部分。
最後還要說明一下：對於不支援CSS或JavaScript的使用者，這個菜單也是可用的。如果不支援JavaScript，則按鈕不會出現浮起、凹陷效果；如果不支援CSS，菜單外觀會有所改變，但菜單準系統還是正常的。
