以下是參考例子:(註:是粘貼的。)
& ltHTML & gt& ltHEAD & gt
& ltTITLE & gt文檔標題& lt/TITLE & gt；
& ltstyle & gt
. menu order 1 {
位置:絕對；
左:-1000；top:-1000；
背景色:# C6C3C6/*淺灰色*/
邊框:純色1px；
邊框-左側-顏色:# C6C3C6/*淺灰色*/
邊框-頂部-顏色:# C6C3C6/*淺灰色*/
邊框-底部-顏色:黑色；
邊框-右側-顏色:黑色；
邊距:0 0 0；
溢出:無；
可見性:可見；
}
. menuBorder2{
位置:絕對；top:0；左:0；
背景色:# C6C3C6/*淺灰色*/
溢出:無；
邊距:4px 0px 4px 0px
邊框:純色1px；
邊框-左側-顏色:白色；
邊框-頂部-顏色:白色；
邊框-底部-顏色:# 848284；/*深灰色*/
border-right-color:# 848284；/*深灰色*/
光標:默認；
}
。菜單{}
。menuRow {
字體大小:9pt
顏色:黑色；
背景色:透明；
光標:默認；
身高:12pt；
}
。菜單圖像單元{
文本對齊:左對齊；
光標:默認；
}
。菜單選項單元格{
文本對齊:左對齊；
光標:默認；
}
。menuArrowCell {
文本對齊:右對齊；
字體大小:8pt
光標:默認；
}
#菜單插入{
位置:絕對；
top:0；左:0；
}
& lt/style & gt；
& lt腳本& gt
var menus =新數組()
功能菜單註冊表(項目)
{
菜單[menus.length] =項目
return (menus.length - 1)
}
功能菜單(標題、命令、圖像、子菜單、分隔符)//創建自己的菜單目錄對象。
{
this.caption = caption
this.command =命令；
this.image = image
this.submenu =子菜單；
this.separator = (separator)？真:假；
this . id = menu register(this)；
}
Function MenuItemOnClick(obj) //響應鼠標OnClick事件。
{
var item = menus[obj.menuid]
var menub 1 = document . all[' MENU '+item . parent+' b 1 ']
window.event.cancelBubble = true
if (item == null)返回
if((type of item . command)= = ' function ')item . command()
if((type of item . command)= = ' string ')window . location = item . command
}
功能菜單onmouseover(obj)//鼠標在菜單上移動時的事件處理。
{
var item = menus[obj.menuid]
var parent = menus[item.parent]
var menub 1 = document . all[' MENU '+item . parent+' b 1 ']
var from element = window . event . from element
var to element = window . event . to element
window.event.cancelBubble = true
//如果鼠標在菜單邊緣，什麽都不會做。
if ((fromElement！= null)& amp；& amp(toElement！= null))
{
if(from element . menuid = = to element . menuid)返回；
}
obj . style . background color = ' # 000084 '//將背景色更改為藍色。
Obj.style.color = 'white' //將文本顏色更改為白色。
//處理子菜單狀態
//關閉當前打開的子菜單。
if ((parent.submenu！= null)& amp；& amp(parent.submenu！= item.submenu))
{
parent.submenu.hide()
parent.submenu = null
}
//打開當前菜單目錄的子菜單。
if ((item.submenu！= null)& amp；& amp(parent.submenu！= item.submenu))
{
item . submenu . top = menub 1 . offsettop+obj . offsettop；
item . submenu . left = menub 1 . offset left+obj . offset width；
item.submenu.show()
parent.submenu = item.submenu
返回；
}
}
mouseout (obj)上的函數菜單//鼠標移出菜單的事件處理。
{
var item = menus[obj.menuid]
var parent = menus[item.parent]
var to element = window . event . to element
window.event.cancelBubble = true
if ((toElement！= null)& amp；& amp(toElement.menuid == parent.id)) {
if ((parent.submenu！= null)& amp；& amp(parent.submenu！= item))
{
parent.submenu.hide()
parent.submenu = null
}
}
if ((window.event.fromElement！= null)& amp；& amp(window.event.toElement！= null))
{
if(window . event . from element . menuid = = window . event . to element . menuid)返回；
}
obj . style . background color = " transparent "
'黑色'
}
函數MenuItemToString()
{
if (this.separator)
return " & lttr & gt& lttd class=menuSep colspan=3>。& lthr & gt& lt/TD & gt；& lt/tr & gt；\n "
return " & lttr class=menuRow \n" +
" onMouseOver = ' MenuItemOnMouseOver(this)' \ n "+
" onMouseOut = ' MenuItemOnMouseOut(this)' \ n "+
" onClick = ' MenuItemOnClick(this)' \ n "+
" menuid=" + this.id +
" & gt\n" +
“& ltTD class = menuImageCell noWrap = noWrap menuid = "+this . id+" & gt；+
((this.image！= null)？“& ltimg class = menu image menuid = "+this . id+" src = ' "+this . image+" ' & gt:" " "+" & lt；/TD & gt；\n" +
“& ltTD class = menuCaptionCell noWrap = noWrap menuid = "+this . id+" & gt；+this . caption+" & lt；/TD & gt；\n" +
“& ltTD class = menuArrowCell noWrap = noWrap menuid = "+this . id+" "+
((this .子菜單！= null)？" style='font-family:Webdings ' >4 ":" style = ' font-family:times ' & gt；)+" & lt；/TD & gt；\n" +
“& lt/tr & gt；\ n "；
}
menuitem . prototype . tostring = menuitem tostring；
Function Menu(top，left) //以鼠標位置為菜單的左頂點創建壹個菜單。
{
this.items =新數組()
this.top = top
this.left =左
this.id =菜單註冊器(this)
this.update = true
menuinsert . insertadjacenthtml(' before end '，this.borders())
}
功能菜單添加(item)//添加子菜單，子菜單繼承其父菜單的屬性。
{
this.items[this.items .長度] = item
item.parent = this.id
}
Function MenuShow(noDisplay) //實現菜單顯示。
{
var menub 1 = document . all[' MENU '+this . id+' b 1 ']
var MENU B2 = document . all[' MENU '+this . id+' B2 ']
如果(this.update)
{
menub2.innerHTML = this.getTable()
this.update = false
}
var MENU = document . all[' MENU '+this . id]
menub 1 . style . top = this . top
menub 1 . style . left = this . left
menu B2 . style . width = menu . offset width+2
menu B2 . style . height = menu . offset height+2
menub 1 . style . width = menu . offset width+4
menub 1 . style . height = menu . offset height+12
//處理當鼠標在窗口邊緣單擊時菜單顯示的位置。
//當菜單超出窗口的下邊緣時，向上移動菜單。
if((menub 1 . offset top+menub 1 . offset height)>(MenuBodyRef.offsetHeight - 4))
menub 1 . style . top = menubodyref . offsetheight-menub 1 . offsetheight-4
//當菜單超出窗口右側時，將其移至左側。
if((menub 1 . offset left+menub 1 . offset width)>(MenuBodyRef.offsetWidth - 24))
menu b 1 . style . left = menubodyref . offsetwidth-menu b 1 . offsetwidth-24
//當菜單超出窗口的上邊緣時，將其向下移動。
if(menub 1 . offsettop & lt；0)
menub1.style.top = 0
//當菜單超出窗口左側時，將其移至右側。
if(menub 1 . offset left & lt；0)
menub1.style.left = 0
if(不顯示)
{
menub 1 . style . top =-1000
menub 1 . style . left =-1000
}否則{
menub 1 . style . visibility = ' visible '
}
}
函數MenuHide() //隱藏菜單。
{
var menub 1 = document . all[' MENU '+this . id+' b 1 ']
如果(this.submenu！= null) this.submenu.hide()
menub 1 . style . visibility = ' hidden '
menub 1 . style . top =-1000
menub 1 . style . left =-1000
}
函數MenuBorders() //響應鼠標的onclick事件。
{
return " & ltdiv id = MENU "+this . id+" b 1 class = MENU border 1 menuid = "+this . id+" onClick = ' window . event . cancel bubble = true ' & gt；\n" +
“& ltdiv id = MENU "+this . id+" B2 class = MENU border 2 menuid = "+this . id+" & gt；\n" +
“& lt/div & gt；\n" +
“& lt/div & gt；\ n "；
}
Function MenuTable() //創建壹個加載菜單內容的表格，方便菜單界面的排版。
{
var字符串
str = " & lt表id=MENU" + this.id + "\n" +
" cell padding = 0 cell spacing = 0 border = 0 class = menu table & gt；\n "
for(var I = 0；我& ltthis . items . length；i++)
str+= this . items[I]；
str+= " & lt；/table & gt；\n "
返回字符串
}
menu . prototype . additem = menu additem；
menu . prototype . borders = menu borders；
menu . prototype . gettable = menu table；
menu . prototype . show = menu show；
menu . prototype . hide = menu hide；
var MenuBodyRef
函數MenuInit() //創建菜單所在的圖層，達到顯示和隱藏的效果。
{
for(document . all中的變量I){
if (document.all[i].tagName == 'BODY ')
{
MenuBodyRef = document.all[i]
menubodyref . insertadjacenthtml(' after begin '，' & ltdiv id = MENUINSERT & gt& lt/div & gt；')
破裂
}
}
}
var mainMenu = null
函數DocOnLoad() //在此添加菜單內容。
{
var子菜單
menu init()；
mainMenu =新菜單(100，20)；
子菜單=新菜單(0，0)
Submenu.addItem(新菜單項('流行歌曲'，' # '))
Submenu.addItem(新的MenuItem ('national style '，' # '))
Submenu.addItem(新菜單項('音樂欣賞'，' # '))
Submenu.addItem(新菜單項(' symphony '，' # '))
submenu.show(true)
MainMenu.addItem(新的MenuItem('音樂空間'，null，null，子菜單，null))
子菜單=新菜單(0，0)
Submenu.addItem(新菜單項('雜項文章'，' # '))
Submenu.addItem(新菜單項(' Macrobook '，' # '))
Submenu.addItem(新菜單項('詩歌和頌歌'，' # '))
submenu.show(true)
MainMenu.addItem(新的MenuItem('文學殿堂'，null，null，子菜單，null))
MainMenu.addItem(新菜單項('軟件下載'，' # '))
MainMenu.addItem(新菜單項('在線遊戲'，' # '))
子菜單=新菜單(0，0)
Submenu.addItem(新菜單項('在線訂購'，' # '))
Submenu.addItem(新的MenuItem ('home property '，' # '))
Submenu.addItem(新菜單項('股票交易'，' # '))
submenu.show(true)
MainMenu.addItem(新的MenuItem ('community service '，' # '，null，子菜單))
MainMenu.addItem(新菜單項('聊天室'，' # '))
MainMenu.addItem(新MenuItem ('Collection '，' h# '))
main menu . additem(new MenuItem(null，null，null，null，true))
MainMenu.addItem(新菜單項(' Search '，' # '，' find.gif '))
main menu . additem(new MenuItem(' leave '，new function ('doc once click()')，' x.gif '))
mainMenu.show(true)
}
var flag = false
函數DocOnClick()///菜單隱藏和顯示
{
如果(標誌){
mainMenu.hide()
}否則{
mainMenu.left = window.event.x
main menu . top = windows . event . y
mainMenu.show()
}
flag =！旗
}
& lt/script & gt；
& ltBODY onLoad = " DocOnLoad()" onClick = " DocOnClick()" & gt；
& ltfont size = 15 color = # ce 288 cface =方正偉貝Traditional >
點擊鼠標左鍵，會彈出壹個菜單。功能也比較齊全。例如突出顯示當前選項、添加子菜單等等。
壹個問題是，每次點擊鼠標左鍵，都會彈出壹個菜單。解決方法是將鼠標限制在壹定範圍內。
點擊彈出菜單。這要根據具體頁面來設置。
& lt/font & gt；
& lt/body & gt；
& lt/html & gt；