Javascript + CSS right-click the page and choose

In the past few days, You need to right-click the function menu on the page to pop up the function. After studying and reading the information, you can find a feasible solution and record it for future use.

First, prepare JSCode, Used to create a menu, locate the mouse position, and so on preparations:

// Menu preliminary test
VaR menuitem = "";
VaR strmenu;
VaR sp = true; // use special effect settings. False indicates that special effects are not used.
VaR Ts = 6;
// Add a menu item
Function addmenu (type, caption, URL, target, icon)
{
If (! Icon)
Iconpath = "jg_n_help.gif"; // default icon path
Else
Iconpath = icon;
Switch (type)
{
Case 0:
If (! Target)
Menuitem + = "<tr Height = 24> <TD class =" loseitems "onclick = \" javascript: location. href = '"+ URL +"' \ "background =" + iconpath + ">" + caption + "<TD> ";
Else
{
If (target = '_ blank ')
Menuitem + = "<tr Height = 24> <TD class =" loseitems "onclick = \" javascript: window. open ('"+ URL +"') \ "background =" + iconpath + ">" + caption + "<TD> ";
Else
Menuitem + = "<tr Height = 24> <TD class =" loseitems "onclick = \" javascript: "+ target + ". location. href = '"+ URL +"' \ "background =" + iconpath + ">" + caption + "<TD> ";
}
Break;
Case 1:
Menuitem + = "<tr Height = 24> <TD class =" loseitems "onclick = \" javascript: "+ URL +" \ "background =" + iconpath + ">" + caption + "<TD> ";
Break;
Case 2:
Menuitem + = "<tr> <TD align = right colspan = 2> <HR> ";
Break;
}
}

// Create a menu
Function buildmenu (){
Alert ();
Strmenu = "<Div id = \" Menu \ "class = \" clsmenu \ "> ";
Strmenu + = "<Table border = 0 cellspacing = 0 width = 100% cellpadding = 0 onmouseover = \" highlight () \ "onmouseout = \" lowlight () \ "> <tr Height = 1> <TD width = 1> <TD width = 1> ";
Strmenu + = menuitem;
Strmenu + = "<tr Height = 1> <TD> </table> ";
Strmenu + = "</div> ";
If (isie () document. Write (strmenu );
Document. oncontextmenu = showmenu;
Document. Body. onclick = hidemenu;
}

// Judge the client browser
Function isie (){
If (navigator. appname = "Microsoft Internet Explorer "){
Return true;
} Else {
Return false;
}
}

// display menu
function showmenu () {
If (isie () {
var redge = document. body. clientWidth-event.clientX-100;
var bedge = document. body. clientHeight-event.clientY-25;
If (redge menu. style. left = document. body. scrollLeft-menu.offsetWidth;
}< br> else {
menu. style. left = document. body. scrollleft + event. clientx + "PX";

}< br> menu. style. top = document. body. scrolltop + event. clienty + "PX";
menu. style. visibility = "visible";
}< br> return false;
}< br> // hide menu
function hidemenu () {
If (isie () menu. style. visibility = "hidden";
}

// highlight when the menu item gets the focus
function highlight () {
If (event. srcelement. classname = "loseitems") {
If (SP)
event. srcelement. style. filter = "revealtrans (duration =. 1) "; event. srcelement. filters [0]. transition = ts;
If (SP)
event. srcelement. filters [0]. apply ();
event. srcelement. classname = "menuitems";
If (SP)
event. srcelement. filters [0]. play ();
}< BR >}

// Menu items lose focus
Function lowlight (){
If (event. srcelement. classname = "menuitems "){
If (SP) event. srcelement. style. Filter = "blendtrans (duration =. 15 )";
If (SP) event. srcelement. Filters [0]. Apply ();
Event. srcelement. classname = "loseitems ";
If (SP) event. srcelement. Filters [0]. Play ();
}
}
// -------------- JS Code ends -------------

// ------------ Menu insertion project demonstration ---------

// Addmenu (type, caption, URL, target, icon)
// Type = 0 hyperjoin type = 1 execute the Javascript statement type = 2 split line
// Caption display text
// URL or Javascript statement
// Target
// Icon

Addmenu (1, "show alarm ");
Addmenu (1, "Show notification ");
Addmenu (2 );
Addmenu (1, "Refresh Board status ");
Buildmenu ();

Next, CSS is used to define the style of the right-click menu:

. clsmenu
{< br> cursor: default;
color: #000000;
position: absolute;
width: pixel PX;
background-color: # d4d0c8;
border: 1px solid #000000;
visibility: hidden;
filter: progid: DXImageTransform. microsoft. shadow (Direction = 135, color = # cccccc, strength = 3); background-image: url('84v?back.gif ')
}

. Menuitems
{
Font-size: 12px;
Color: #000000;
Padding-left: 30px;
Padding-Right: 19px;
Padding-top: 2px;
Padding-bottom: 0px;
Line-Height: 18px;
Background-color: # b6bdd2;
Border: 1px solid # 0a246a;
Color: #000000;
Background-repeat: No-Repeat;
}
. Loseitems
{
Font-size: 12px;
Color: #000000;
Padding-left: 29px;
Padding-Right: 10px;
Padding-top: 1px;
Padding-bottom: 1px;
Line-Height: 18px;
Color: #000000;
Background-repeat: No-Repeat;
}
HR
{
Width: 100%;
Height: 1px;
}

Finally, the page is displayed. The page content is customized. You only need to add the above JS and CSS to the current page. This is so simple!