Css+javascript to create a cool right button menu

css| Menu

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.