Effect Chart:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <ptml> <pead> <title>css and JavaScript creation Page Right menu </title> <style type= "Text/css" > Body {font-family: "XXFarEastFont-Arial"; font-size:12px; }. skin0 {padding-top:4px; Text-align:left; width:100px; BORDER:2PX solid black; Background-color:menu; Font-family: "The song Body"; line-height:20px; Cursor:default; Visibility:hidden; }. skin1 {padding-top:4px; Cursor:default; Font:menutext; Text-align:left; Font-family: "The song Body"; font-size:10pt; width:100px; Background-color:menu; Border:1 solid buttonface; Visibility:hidden; Border:2 outset buttonhighlight; } </style> <script language= ' JavaScript ' > function load1 () {if (document.all && window.print) {D Ocument.oncontextmenu = SHOWMENUIE5; Document.onclick = HIDEMENUIE5; The function showmenuie5 () {//Gets the position of the current right mouse button, thus defining the location of the menu display var Rightedge = Document.body.clientwidth-event.clientx; var Bottomedge= Document.body.clientheight-event.clienty; If the space from the mouse position to the right side of the window is less than the width of the menu, position the left coordinate of the menu as the//front mouse position to the left a menu width if (rightedge <ie5menu.offsetwidth) Ie5menu.style.left = Document.body.scrollLeft + event.clientx-ie5menu.offsetwidth; else//Otherwise, the left coordinate of the location menu is the current mouse position ie5menu.style.left = document.body.scrollLeft + event.clientx; * If the space from the mouse position to the bottom of the window is less than the height of the menu, position the top coordinate of the menu to the current mouse position up a menu height if (bottomedge <ie5menu.offsetheight) ie5menu.style.top = Document.body.scrollTop + event.clienty-ie5menu.offsetheight; else Ie5menu.style.top = Document.body.scrollTop + event.clienty; Set menu Visible ie5menu.style.visibility = "visible"; return false; function hidemenuie5 () {ie5menu.style.visibility = "hidden"; The//JUMPTOIE5 () function is what happens when the mouse clicks the layer in the right-click menu, which is the Execute option function jumptoie5 () {if (Event.srcElement.getAttribute ("target")!= nul L) window.open (Event.srcElement.url, Event.srcElement.getAttribute ("target")); else window.location = Event.srcElement.url; } load1 () </script> </pead> <body> Right-click menu to create Test effect! <div id= "Ie5menu" class= "Skin0" > <div onclick= "alert (' Back please think twice! "> Back </div> <div onclick=" alert (' I wish you a bright future, bold move forward! "> Forward </div> <pr> <div url=" http://www.jb51.net "target=" _blank "onclick=" jumptoie5 () "> Cloud-Habitat Community </div> <div url= "http://www.jb51.net/photoshop/" target= "_blank" onclick= "jumptoie5 ()" >photoshop Course < /div> <div url= "http://www.jb51.net/list/list_3_1.htm" target= "_blank" onclick= "jumptoie5 ()" >javascript </div> <div url= "http://www.jb51.net/list/list_114_1.htm" target= "_blank" onclick= "jumptoie5 ()" > vbscript</div> <pr> <div url= "http://www.jb51.net/softs/index.html" target= "_blank" onclick= " JUMPTOIE5 () "> Software downloads </div> <div url=" http://www.mydown.com/codes/"target=" _blank "onclick=" jumptoie5 "()" > Source Download </div> <pr> <div url= "http://www.jb51.net/list/list_6_1.htm" target= "_blank" onclick= " JUMPTOIE5 () "> Regular expression </div> <div url=" http://www. jb51.net/support.htm "onclick=" jumptoie5 () > Contact me </div> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Code Explanation:
1, in the page load, the first implementation of the Load1 () method
First check is not IE browser, if the current browser is the Internet Explorer,document.all will return true. The following definition should be valid. That is to say, when checking to the browser that the client is using is IE, when the user produces right key event to call function Showmenuie5, when the user produces the left-button event, call function Hidemenuie5.
2, then we have to consider how to use function showmenuie5 and function hidemenuie5 to implement menu display and hiding.
Of course, the menu here is not really the right button menu, but a div we made ourselves, in this div we want to install the things. The mouse event calls the function to control its explicit, which achieves the same effect as using the right mouse button.
The outermost layer of this piece is a div with ID ie5menu, we have defined its style as Skin0, you can also customize other styles according to custom, and then replace Skin0.
3, click the menu options after the operation
The JUMPTOIE5 () function is what happens when you click the layer in the right mouse button menu, which is the execution option
