Css+javascript to create a cool right button menu

Css|javascript| Menu | Right button

In fact, on the Web page to implement the style of the menu is already an old topic, under normal circumstances, the right menu on the Web page is the default IE right key options, including some commonly used functions.

But sometimes we run into problems like this, we want to prohibit visitors to use the right menu or to screen some of the right menu features, for example, in order to protect the content of the Web page we do not want visitors to the right menu to view the source code, and do not want it through the right key to the content of the page to select, copy, etc. Many web designers in the consideration of this problem is simply the right to screen, so we might as well use the script to implement a style right-click menu, and in this right button menu loaded with our own content. Let's try this idea here.

The first thing to consider is to call a function by right-clicking the event to display the contents of the new right-click menu. We know that the right mouse click event is invoked through Document.oncontextmenu, and if we define a function document.oncontextmenu=, we can implement the new right-click menu call. The key question is how to use this function to control the display of the menu, but also through the form of the Click event Document.body.onclick (generally refers to left-click) to hide the menu, such a process completes the right mouse button menu pop-up and hidden.

First take a look at this script code:

/* Initialize * *
<script language= "JavaScript1.2" >
/* If the current browser is the Internet Explorer,document.all return true * * *
if (document.all && window.print) {

/* Select the display style of the menu box * *
Ie5menu.classname = Menuskin;

/* Redirect Mouse right button event processing for custom program showmenuie5*/
Document.oncontextmenu = SHOWMENUIE5;

/* Redirect mouse button Event process for custom program hidemenuie5*/
Document.body.onclick = HIDEMENUIE5;
}
</script>

In general, the right mouse button event occurs only after the page is loaded, so in order not to affect the loading speed of the page we can put this code on the last side of the page. This code is very simple, first test is not IE browser, if so the following definition should be effective. 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.

To solve the above problem, now 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.

Now let's design a div, see the code:

<div id= "Ie5menu" class= "Skin0" >
<div class= "MenuItems" Url= "Javascript:history.back ();" > Back </div>
<div class= "MenuItems" Url= "Javascript:history.forward ();" > Forward </div>
<div class= "MenuItems" url= "http://www.webjx.com" target= "_blank" > Web page Teaching </div>
<div class= "MenuItems" url= "http://www.webjx.com/htmldata/sort/3.html" target= "_blank" > Web page Making </div>
<div class= "MenuItems" url= "http://www.webjx.com/htmldata/sort/4.html" target= "_blank" > Animation production </div>
<div class= "MenuItems" url= "http://www.webjx.com/htmldata/sort/6.html" target= "_blank" > Network programming </div>
<div class= "MenuItems" url= "http://www.webjx.com/htmldata/sort/15.html" target= "_blank" > Video Tutorials </div>
<div class= "MenuItems" url= "http://www.webjx.com/htmldata/sort/1.html" target= "_blank" > Industry news </div>
<div class= "MenuItems" url= "http://www.webjx.com/aboutus.htm" target= "_blank" > About this site </div>
<div class= "MenuItems" url= "mailto:tslxg@hotmail.com" > Contact me </div>
</div>

The outermost layer of this piece is a div with ID ie5menu, we define its style as skin0, and when this div is displayed it can produce onmouseover events and onmouseout events as well as the onclick events. As we do with the options in the right-click menu, the onmouseover event, the onmouseout event, and the onclick event can simulate the entire right mouse button event. Here, I have defined a few options in the right-click menu: page operation function, column navigation function, site navigation function and other information, can play a good user experience effect.

This uses the div URL property, the value can be an event or a page address, of course, this address includes an absolute address and relative address, the above event is also very simple here does not need me to say more.

Here we analyze several functions: Showmenuie5 () function (Display menu) hidemenuie5 () function (hidden menu) and jumptoie5 () function (right-click menu option Jump)

SHOWMENUIE5 () function:

/* Display Menu/*
function Showmenuie5 () {
Searchform.k.value=window.document.selection.createrange (). text;

/* Get the position of the current right mouse button to define 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 menu for the current mouse position to the left one 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 up to a menu height of the current mouse position.
if (Bottomedge <ie5menu.offsetheight)
Ie5menu.style.top = Document.body.scrollTop + event.clienty-ie5menu.offsetheight;
Else
/* Otherwise, position the top coordinates of the menu for the current mouse position * *
Ie5menu.style.top = Document.body.scrollTop + event.clienty;

/* Set Menu Visible/*
ie5menu.style.visibility = "visible";
return false;
}

HIDEMENUIE5 () function:

/* Hidden Menu/*
function Hidemenuie5 () {
/* Very simple, set visibility as hidden on ok! */
ie5menu.style.visibility = "hidden";
}

JUMPTOIE5 () function:

/* Go to the new link location/*
function Jumptoie5 () {
var seltext=window.document.selection.createrange (). Text
if (Event.srcElement.className = = "MenuItems") {
/* If there is a target window to open the link, open the link in that window.
if (Event.srcElement.getAttribute ("target")!= null)
window.open (Event.srcElement.url, Event.srcElement.getAttribute ("target"));
Else
/* Otherwise, open the link in the current window * *
window.location = Event.srcElement.url;
}
These three functions can be said to implement the key function of the right-click menu function, the SHOWMENUIE5 () function defines the basic attributes of a div with ID Ie5menu, including its display position, which is determined by the mouse position, That is to say where the mouse clicks then the div is displayed, and there is a very important point, that is at this time the div style of the visibility attribute value must be visible, that is, is visible, otherwise the previous definition of its display position is meaningless. The HIDEMENUIE5 () function simply defines the Ie5menu Visibiliy property as hidden. JUMPTOIE5 () function to implement the mouse right click on the layer of the menu of things happen, that is, the implementation options, including open window links or Execute script statements, there is a point to be reminded of whether the window links or script statements, they are equal to the value of the URL, such as: Url= "http:// Www.webjx.com ", url=" javascript:window.location= ' http://www.webjx.com '; " or url= "Javascript:history.back ();" These things can be executed in the JUMPTOIE5 function.

Since this article is about using Css+javascript to implement the right menu, the previous mentioned are JavaScript, as if not related to CSS, do not worry, the following will use CSS to define the style of the right menu, otherwise this so-called right menu on the chaos into a step confused.

First look at the Ie5menu style skin0 and skin1 (depending on different browsers invoke different skins), in order to make the "pop-up" right-click menu more authentic, here we want to simulate the real right menu style, see the following style code:

Body {
Font-family: "The song Body";
font-size:12px;
}

/* Defines the style of the menu box 1*/
. skin0 {
Position:absolute;
padding-top:4px;
Text-align:left;
width:100px; /* Width, can be adjusted according to the length of the actual menu item name.
BORDER:2PX solid black;
Background-color:menu; /* Menu background color scheme, which has selected the system default menu color * *
Font-family: "The song Body";
line-height:20px;
Cursor:default;
Visibility:hidden; /* Initially, set to invisible * *
}

/* Defines the style of the menu box 2*/
. skin1 {
padding-top:4px;
Cursor:default;
Font:menutext;
Position:absolute;
Text-align:left;
Font-family: "The song Body";
font-size:10pt;
width:100px; /* Width, can be adjusted according to the length of the actual menu item name.
Background-color:menu; /* Menu background color scheme, which has selected the system default menu color * *
Border:1 solid buttonface;
Visibility:hidden; /* Initially, set to invisible * *
Border:2 outset buttonhighlight;
}

/* Define the display style of the menu bar * *
. MenuItems {
padding:2px 1px 2px 10px;
}
-->

The above style definition is very simple, but its property value is carefully debugged, so that its display as close as possible to the real right menu.

OK, all the work has been done almost, now we put the things mentioned above quickly together to see the real effect of it.

Effect preview:

<ptml><pead><meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "><title> Cool Web page Right-click menu </title><style>body {font-family:" Song body "; font-size:12px; margin-left:0px;margin-top:10px;margin-right:0px;margin-bottom:0px;} /* Defines the style of the menu box 1*/.skin0 {position:absolute;padding-top:4px;text-align:left;width:100px; /* Width, according to the actual menu item name of the length of the appropriate adjustment */border:2px solid black;background-color:menu; /* Menu background color scheme, here selected the system default menu color */font-family: "Song body"; Line-height:20px;cursor:default;visibility:hidden; /* Initially, set to invisible */}/* to define the style of the menu box 2*/.skin1 {padding-top:4px;cursor:default;font:menutext;position:absolute;text-align: left;font-family: "Song body"; font-size:10pt;width:100px; /* Width, you can adjust the */background-color:menu according to the length of the actual menu item name; /* Menu background color scheme, here selected the system default menu color */border:1 solid buttonface;visibility:hidden; /* Initially, set to invisible */border:2 outset buttonhighlight;} /* Defines the display style for the menu bar */.menuitems {padding:2px 1px 2px 10px;} --></style><script language= "JavascriPT "><!--//define the appearance of the menu display, you can select one of the 2 formats defined above var Menuskin =" Skin1 "; Whether the link string for the menu item bar is displayed in the status line of the browser window var display_url = 0; function showmenuie5 () {//Gets the position of the current right mouse button, which defines the position 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 menu to the left of the current mouse position to a menu width of 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, On the top of the location menu, the current mouse position is up to a menu height if (bottomedge <ie5menu.offsetheight) ie5menu.style.top = Document.body.scrollTop + event.clienty-ie5menu.offsetheight;else//Otherwise, position the top coordinates of the menu for the current mouse position ie5menu.style.top = Document.body.scrollTop + event.clienty;//settings menu Visible ie5menu.style.visibility = "visible"; return false;} function hidemenuie5 () {//Hide menu//very simple, set visibility to hidden ok! ie5menu.style.visibility = "hidden";} function highlightie5 () {//High brightness mouse PassMenu bar Item//If the mouse passes over the object is MenuItems, reset the background color and foreground colors//event.srcelement.classname indicates that the event comes from the name of the object, it is important to first determine this value! if (Event.srcElement.className = = "MenuItems") {Event.srcElement.style.backgroundColor = "highlight"; Event.srcElement.style.color = "white";//Display the link information to the status line//event.srcelement.url indicates the link urlif (display_url) from the object representation of the event Window.status = Event.srcElement.url; }}function lowlightie5 () {//restore normal display of menu bar items if (event.srcElement.className = = "MenuItems") { Event.srcElement.style.backgroundColor = ""; Event.srcElement.style.color = "BLACK"; window.status = ""; }}//Right-button drop-down Menu feature jump function jumptoie5 () {//Go to New link location var seltext=window.document.selection.createrange (). Textif ( Event.srcElement.className = = "MenuItems") {//If there is a target window to open the link, open the link in that window if (Event.srcElement.getAttribute ("target") != null) window.open (Event.srcElement.url, Event.srcElement.getAttribute ("target")); else//otherwise, Opens the link in the current window window.location = Event.srcElement.url; }}//--></script></pead><body><center> <p> Right-click to see the effect-<a href= "http:www.webjx.com/"target=" _blank "> Web Teaching Network </a></p></center><div id=" Ie5menu "class=" Skin0 " ><div class= "MenuItems" Url= "Javascript:history.back ();" > Back </div><div class= "MenuItems" Url= "Javascript:history.forward ();" > Forward </div><pr><div class= "MenuItems" url= "http://www.webjx.com/" target= "_blank" > Web page Teaching </div ><div class= "MenuItems" url= "http://www.webjx.com/htmldata/sort/4.html" target= "_blank" > Animation production </div> <div class= "MenuItems" url= "http://www.webjx.com/htmldata/sort/6.html" target= "_blank" > Network programming </div>< Div class= "MenuItems" url= "http://www.webjx.com/htmldata/sort/8.html" target= "_blank" > Web footage </div><pr ><div class= "MenuItems" url= "http://www.webjx.com/htmldata/sort/15.html" target= "_blank" > Video Tutorials </div ><div class= "MenuItems" url= "http://www.webjx.com/htmldata/sort/5.html" target= "_blank" > Web effects </div> <pr><div class= "MenuItems" url= "http://www.webjx.com/aboutus.htM "target=" _blank > About this site </div><div class= "MenuItems" url= "mailto:tslxg@hotmail.com" > Contact Us </div ></div></body></ptml><script language= "JavaScript1.2" >//if the current browser is Internet Explorer, Document.all returns True if (document.all && window.print) {//Select menu box display style Ie5menu.classname = menuskin;// The process of redirecting the right mouse button event is the custom program Showmenuie5document.oncontextmenu = showmenuie5;// The process for redirecting the left mouse button event is the custom program Hidemenuie5document.body.onclick = HIDEMENUIE5; </script>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

Thank Tenkine!