|
Page Details >>>
(Internet Explorer Only) Displays a menu when the visitor right click's on the page. You can easily use style sheets to modify the menu skins, or write your own.
Just right click on the page for the demo
Add the below code to the <body> section of your page:
<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="javascript"
type="text/javascript">
var
menuskin =
"skin1";
var
display_url =
0;
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;
}
}
</script>
<div
id="ie5menu"
class="skin0"
onMouseover="highlightie5()"
onMouseout="lowlightie5()"
onClick="jumptoie5();">
<div
class="menuitems"
url="javascript:history.back();">Go
Back</div>
<div
class="menuitems"
url="http://yaldex.com">Go
Home</div>
<hr>
<div
class="menuitems"
url="http://yaldex.com/JSFactory_Pro.htm">JS
Forum</div>
<div
class="menuitems"
url="http://yaldex.com/JSFactory_Pro.htm">Site
FAQs</div>
<hr>
<div
class="menuitems"
url="http://yaldex.com/JSFactory_Pro.htm">Link
to Us</div>
<div
class="menuitems"
url="http://yaldex.com/JSFactory_Pro.htm">Contact
Us</div>
</div>
<script
language="JavaScript1.2">
if
(document.all
&&
window.print)
{
ie5menu.className
=
menuskin;
document.oncontextmenu
=
showmenuie5;
document.body.onclick
=
hidemenuie5;
}
</script>
|
↓
|