The following is a reference example: (note: it is pasted. )
& ltHTML & gt& ltHEAD & gt
< title > document title ;
& ltstyle & gt
. menu order 1 {
Location: absolute;
Left:-1000; top:- 1000；
Background color: # C6C3C6/* light gray */
Border: solid color1px;
Border-left-color: # C6C3C6/* light gray */
Border-top-color: # C6C3C6/* light gray */
Border-bottom-color: black;
Border-right-color: black;
Margin: 0 0;
Overflow: None;
Visibility: visibility;
}
. menuBorder2{
Location: absolute; top:0； Left: 0;
Background color: # C6C3C6/* light gray */
Overflow: None;
Margin: 4px 0px 4px 0px
Border: solid color1px;
Border-left-color: white;
Border-top-color: white;
Border-bottom-color: # 848284; /* Dark gray */
border-right-color:# 848284； /* Dark gray */
Cursor: default;
}
. Menu {}
. menuRow {
Font size: 9pt
Color: black;
Background color: transparent;
Cursor: default;
Height:12pt;
}
. Menu image unit {
Text alignment: left alignment;
Cursor: default;
}
. Menu option cell {
Text alignment: left alignment;
Cursor: default;
}
. menuArrowCell {
Text alignment: right alignment;
Font size: 8pt
Cursor: default;
}
# Menu Insert {
Location: absolute;
top:0； Left: 0;
}
& lt/style & gt；
& lt script & gt
Var menus = new array ()
Function Menu Registry (Item)
{
Menu [menus.length] = item
return (menus.length - 1)
}
Function menu (title, command, image, submenu, separator)//Create your own menu directory object.
{
this.caption = caption
This.command = command;
this.image = image
This.submenu = submenu;
this.separator = (separator)？ True: false;
this . id = menu register(this)；
}
Function menuitem click (obj)//Respond to the mouse click event.
{
var item = menus[obj.menuid]
var menub 1 = document . all[' MENU '+item . parent+' b 1 ']
window.event.cancelBubble = true
If (item == null) returns.
if((type of item . command)= = ' function ')item . command()
if((type of item . command)= = ' string ')window . location = item . command
}
Function menu onmouseover(obj)// Event handling when the mouse moves on the menu.
{
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 the mouse is on the edge of the menu, nothing will be done.
if ((fromElement！ = null)& amp； & amp(toElement！ = null))
{
If (fromelement.menuid = = toelement.menuid) returns;
}
Obj.style.backgroundcolor =' # 000084'//Change the background color to blue.
Obj.style.color = 'white' // Change the text color to white.
//Handling submenu status
//Close the currently open submenu.
if ((parent.submenu！ = null)& amp； & amp(parent.submenu！ = item.submenu))
{
parent.submenu.hide()
parent.submenu = null
}
//Open the submenu of the current menu directory.
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
Return;
}
}
Function menu on mouseout (obj)//Event handling of mouse out menu.
{
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.fromelement.menuid = = window.event.toelement.menuid) returns;
}
obj . style . background color = " transparent "
Black'
}
Function 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. submenu! = 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) // Create a menu with the mouse position as the left vertex of the menu.
{
This.items = new array ()
this.top = top
This.left = left
This.id = menu register (this)
this.update = true
menuinsert . insertadjacenthtml(' before end '，this.borders())
}
Function Menu Add (item)// Add a submenu, which inherits the properties of its parent menu.
{
This.items[this.items length] = item
item.parent = this.id
}
Function MenuShow(noDisplay) // realizes menu display.
{
var menub 1 = document . all[' MENU '+this . id+' b 1 ']
var MENU B2 = document . all[' MENU '+this . id+' B2 ']
If (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
//Handles where the menu is displayed when the mouse clicks on the edge of the window.
//When the menu exceeds the lower edge of the window, move the menu up.
if((menub 1 . offset top+menub 1 . offset height)>(MenuBodyRef.offsetHeight - 4))
menub 1 . style . top = menubodyref . offsetheight-menub 1 . offsetheight-4
//When the menu goes beyond the right side of the window, move it to the left.
if((menub 1 . offset left+menub 1 . offset width)>(MenuBodyRef.offsetWidth - 24))
menu b 1 . style . left = menubodyref . offsetwidth-menu b 1 . offsetwidth-24
//When the menu exceeds the top edge of the window, move it down.
if(menub 1 . offsettop & lt； 0)
menub 1.style.top = 0
//When the menu goes beyond the left side of the window, move it to the right side.
if(menub 1 . offset left & lt； 0)
menub 1.style.left = 0
If (not displayed)
{
menub 1 . style . top =- 1000
menub 1 . style . left =- 1000
} Otherwise {
menub 1 . style . visibility = ' visible '
}
}
The function MenuHide() // hides the menu.
{
var menub 1 = document . all[' MENU '+this . id+' b 1 ']
If (this.submenu! = null) this.submenu.hide()
menub 1 . style . visibility = ' hidden '
menub 1 . style . top =- 1000
menub 1 . style . left =- 1000
}
The MenuBorders() // function responds to the onclick event of the mouse.
{
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() // Create a table for loading menu contents, which is convenient for typesetting menu interface.
{
Var string
Str = "< table id=MENU"+this.id+"\n"+
" cell padding = 0 cell spacing = 0 border = 0 class = menu table & gt； \n "
for(var I = 0； I< this. items.length; i++)
str+= this . items[I]；
str+= " & lt； /table & gt； \n "
Returns a string
}
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
The function MenuInit() // creates the layer where the menu is located, so as to achieve the effect of displaying and hiding.
{
For (variable I in document. all) {
if (document.all[i].tagName == 'BODY ')
{
MenuBodyRef = document.all[i]
menubodyref . insertadjacenthtml(' after begin '，' & ltdiv id = MENUINSERT & gt& lt/div & gt；' )
break
}
}
}
var mainMenu = null
Function DocOnLoad() // Add menu content here.
{
Var submenu
menu init()；
MainMenu = new menu (100,20);
Submenu = new menu (0,0)
Submenu.addItem (new menu item ('pop songs',' #'))
Submenu.addItem (new MenuItem ('national style',' #'))
Submenu.addItem (new menu item ('Music Appreciation',' #'))
Submenu.addItem (new menu item ('symphony',' #'))
submenu.show(true)
MainMenu.addItem (new MenuItem ('music space', null, null, submenu, null))
Submenu = new menu (0,0)
Submenu.addItem (new menu item ('Miscellaneous Articles',' #'))
Submenu.addItem (new menu item ('Macrobook',' #'))
Submenu.addItem (new menu item ('Poetry and Ode',' #'))
submenu.show(true)
MainMenu.addItem (new MenuItem ('literary palace', null, null, submenu, null))
MainMenu.addItem (new menu item ('software download',' #'))
MainMenu.addItem (new menu item ('online game',' #'))
Submenu = new menu (0,0)
Submenu.addItem (new menu item ('order online',' #'))
Submenu.addItem (new MenuItem ('home property',' #'))
Submenu.addItem (new menu item ('stock trading',' #'))
submenu.show(true)
MainMenu.addItem (new MenuItem ('community service',' #', null, submenu))
MainMenu.addItem (new menu item ('chat room',' #'))
MainMenu.addItem (new MenuItem ('Collection',' h#'))
main menu . additem(new MenuItem(null，null，null，null，true))
MainMenu.addItem (new menu item ('Search',' #',' find.gif'))
main menu . additem(new MenuItem(' leave '，new function ('doc once click()')，' x.gif '))
mainMenu.show(true)
}
var flag = false
Function DocOnClick()/// Menu Hiding and Displaying
{
If (logo) {
mainMenu.hide()
} Otherwise {
mainMenu.left = window.event.x
main menu . top = windows . event . y
mainMenu.show()
}
flag =！ a kind of ancient banner
}
& lt/script & gt；
& ltBODY onLoad = " DocOnLoad()" onClick = " DocOnClick()" & gt；
& lt font size =15color = # ce288cface = Founder Weibei Traditional >
Click the left mouse button and a menu will pop up. The functions are also relatively complete. Such as highlighting the current option, adding a submenu, and so on.
One problem is that every time you click the left mouse button, a menu will pop up. The solution is to limit the mouse to a certain range.
Click the pop-up menu. This should be set according to the specific page.
& lt/font & gt；
& lt/body & gt；
& lt/html & gt；