按鈕菜單可以在許多網站見到，比如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，菜單外觀會有所改變，但菜單基本功能還是正常的。