Css+javascript to create super cool right menu (2)

Css|javascript| Menu | Right button

In the General Web page, ie browser's default right button menu is a fixed mode, most users browse the Web when the use of it is not high. For professional web designers, if you can design the right button menu personalized content, the style of how cool and convenient.

Just imagine, the user in your site a little right button, is your carefully organized "link", "letter", even contains a colorful interactive Flash animation! See how to make it:

<style>
<!--
. skin0 {
Position:absolute;
Text-align:left;
width:200px;
BORDER:2PX solid black;
Background-color:menu;
Font-family:verdana;
line-height:20px;
Cursor:default;
Visibility:hidden;
}
. skin1 {
Cursor:default;
Font:menutext;
Position:absolute;
Text-align:left;
Font-family:arial, Helvetica, Sans-serif;
font-size:10pt;
width:120px;
Background-color:menu;
Border:1 solid buttonface;
Visibility:hidden;
Border:2 outset buttonhighlight;
}
. MenuItems {
padding-left:15px;
padding-right:10px;
}
-->
</style>
<script language= "JavaScript1.2" >

<!--This script and many more are available free online at-->
<!--the JavaScript source!! Http://javascript.internet.com-->

<!--Begin
var Menuskin = "Skin1"; Skin0, or Skin1
var display_url = 0; Show URL in status bar?
function Showmenuie5 () {
var rightedge = Document.body.clientwidth-event.clientx;
var bottomedge = Document.body.clientheight-event.clienty;
if (Rightedge <ie5menu.offsetwidth)
Ie5menu.style.left = Document.body.scrollLeft + Event.clientx-
Ie5menu.offsetwidth;
Else
Ie5menu.style.left = Document.body.scrollLeft + event.clientx;
if (Bottomedge <ie5menu.offsetheight)
Ie5menu.style.top = Document.body.scrollTop + Event.clienty-
Ie5menu.offsetheight;
Else
Ie5menu.style.top = Document.body.scrollTop + event.clienty;
ie5menu.style.visibility = "visible";
return false;
}
function Hidemenuie5 () {
ie5menu.style.visibility = "hidden";
}
function Highlightie5 () {
if (Event.srcElement.className = = "MenuItems") {
Event.srcElement.style.backgroundColor = "Highlight";
Event.srcElement.style.color = "White";
if (display_url)
Window.status = Event.srcElement.url;
}
}
function Lowlightie5 () {
if (Event.srcElement.className = = "MenuItems") {
Event.srcElement.style.backgroundColor = "";
Event.srcElement.style.color = "BLACK";
Window.status = "";
}
}
function Jumptoie5 () {
if (Event.srcElement.className = = "MenuItems") {
if (Event.srcElement.getAttribute ("target")!= null)
window.open (Event.srcElement.url, Event.srcElement.getAttribute ("target"));
Else
window.location = Event.srcElement.url;
}
}
End-->
</script>
<div id= "Ie5menu" class= "Skin0"
>
<div class= "MenuItems" Url= "Javascript:history.back ();" > Return </div>
<div class= "MenuItems" url= "http://www.webjx.com Target=_blank" > Back page </div>
<div class= "MenuItems" url= "http://www.163.com" target=_blank> netease </div>
<div class= "MenuItems" url= "http://www.sohu.com" target=_blank> Sohu </div>
<div class= "MenuItems" url= "http://www.sina.com.cn" target=_blank> Sina </div>
<div class= "MenuItems" url= "http://www.yahoo.com.cn" target=_blank> Yahoo </div>
</div>
<script language= "JavaScript1.2" >
if (document.all && window.print) {
Ie5menu.classname = Menuskin;
Document.oncontextmenu = SHOWMENUIE5;
Document.body.onclick = HIDEMENUIE5;
}
</script>

　　<style> <!--. skin0 {position:absolute; 　　Text-align:left; 　　width:200px; 　　BORDER:2PX solid black; 　　Background-color:menu; 　　Font-family:verdana; 　　line-height:20px; 　　Cursor:default; 　　Visibility:hidden; 　　}. skin1 {cursor:default; 　　Font:menutext; 　　Position:absolute; 　　Text-align:left; 　　Font-family:arial, Helvetica, Sans-serif; 　　font-size:10pt; 　　width:120px; 　　Background-color:menu; 　　Border:1 solid buttonface; 　　Visibility:hidden; 　　Border:2 outset buttonhighlight; 　　}. MenuItems {padding-left:15px; 　　padding-right:10px; }--> </style> <script language= "JavaScript1.2" > <!--this SCRIPT and many more are available FR EE online at--> <!--the JavaScript source!! Http://javascript.internet.com--> <!--Begin var Menuskin = "Skin1"; Skin0, or skin1 var display_url = 0; 　　Show URL in status bar? 　　function showmenuie5 () {var rightedge = Document.body.clientwidth-event.clientx; var Bottomedge = dOcument.body.clientheight-event.clienty; if (Rightedge <ie5menu.offsetwidth) ie5menu.style.left = Document.body.scrollLeft + Event.clientx-ie5menu.offsetwi 　　Dth 　　else Ie5menu.style.left = Document.body.scrollLeft + event.clientx; if (Bottomedge <ie5menu.offsetheight) ie5menu.style.top = Document.body.scrollTop + event.clienty-ie5menu.offsethe 　　ight; 　　else Ie5menu.style.top = Document.body.scrollTop + event.clienty; 　　ie5menu.style.visibility = "visible"; 　　return false; 　　function hidemenuie5 () {ie5menu.style.visibility = "hidden"; The function highlightie5 () {if (Event.srcElement.className = = "MenuItems") {Event.srcElement.style.backgroundColor 　　= "Highlight"; 　　Event.srcElement.style.color = "White"; 　　 if (display_url) window.status = Event.srcElement.url; }} function Lowlightie5 () {if (Event.srcElement.className = = "MenuItems") {Event.srcElement.style.backgroundCol 　　or = ""; 　　Event.srcElement.style.color = "BLACK"; Window.status =""; }} function Jumptoie5 () {if (Event.srcElement.className = = "MenuItems") {if (Event.srcElement.getAttribute ("Tar 　　Get ")!= null) window.open (Event.srcElement.url, Event.srcElement.getAttribute (" target ")); 　　 else window.location = Event.srcElement.url; }//End--> </script> <div id= "Ie5menu" class= "Skin0" > <div class= "MenuItems" url= "JAV" Ascript:history.back (); " 　　> Back </div> <div class= "MenuItems" url= "http://www.webjx.com" target=_blank> back page </div> <pr> <div class= "MenuItems" url= "http://www.163.com" target=_blank> netease </div> <div class= "MenuItems" Http://www.sohu.com "target=_blank> Sohu </div> <pr> <div class=" MenuItems "url=" http:// www.sina.com.cn "target=_blank> Sina </div> <div class=" MenuItems "url=" http://www.yahoo.com.cn "Target=_" blank> Yahoo </div> </div> <script language= "JavaScript1.2" > if (document.all && window.priNT) {ie5menu.classname = Menuskin; 　　Document.oncontextmenu = SHOWMENUIE5; 　　Document.body.onclick = HIDEMENUIE5; } </script>

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