Right Click Configure

4 Feb

<head>
<style>
<!–
/*
Context menu Script-
© Dynamic Drive (www.dynamicdrive.com) Last updated: 00/03/28
For full source code, 100’s more DHTML scripts, and Terms Of Use,
visit dynamicdrive.com
*/

.skin0{
position:absolute;
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;
width: 165px;
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″>
//set the skin of the menu (0 or 1, with 1 rendering a default Windows menu like skin)
var menuskin=1

//set this variable to 1 if you wish the URLs of the highlighted menu to be displayed in the status bar
var display_url=0

function showmenuie5(){
//Find out how close the mouse is to the corner of the window
var rightedge=document.body.clientWidth-event.clientX
var bottomedge=document.body.clientHeight-event.clientY

//if the horizontal distance isn’t enough to accomodate the width of the context menu
if (rightedge<ie5menu.offsetWidth)
//move the horizontal position of the menu to the left by it’s width
ie5menu.style.left=document.body.scrollLeft+event.clientX-ie5menu.offsetWidth
else
//position the horizontal position of the menu where the mouse was clicked
ie5menu.style.left=document.body.scrollLeft+event.clientX

//same concept with the vertical position
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==1)
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>

</head>

<body>
<!–[if IE]>
<div id=”ie5menu” class=”skin0″ onMouseover=”highlightie5()” onMouseout=”lowlightie5()” onClick=”jumptoie5()”>
<div class=”menuitems” url=”http://dynamicdrive.com”>Dynamicdrive.com</div&gt;
<div class=”menuitems” url=”http://dynamicdrive.com/new.htm&#8221; target=”newwin”>What’s New?</div>
<div class=”menuitems” url=”http://dynamicdrive.com/hot.htm”>What’s Hot?</div>
<div class=”menuitems” url=”http://wsabstract.com/cgi-bin/Ultimate.cgi”>Message Forum</div>
<div class=”menuitems” url=”http://dynamicdrive.com/faqs.htm”>FAQs</div&gt;
<div class=”menuitems” url=”http://dynamicdrive.com/submitscript.htm”>Submit</div&gt;
<hr>
<div class=”menuitems” url=”mailto:dynamicdrive@yahoo.com”>Email Us</div>
</div>
<![endif]–>
<script language=”JavaScript1.2″>
if (document.all&&window.print){
if (menuskin==0)
ie5menu.className=”skin0″
else
ie5menu.className=”skin1″
document.oncontextmenu=showmenuie5
document.body.onclick=hidemenuie5
}
</script>

</body>

<percede>

This script is extremely easy to customize. To edit the contents of the menu, simply change the text and urls of the code in Part 2. If you wish to change the physical width of the menu, change the width value inside the <style> tag of Part 1.

As mentioned, the menu supports two different looks. Modify variable “menuskin” of Part 2 to switch between them.

Also, each <div> supports a target attribute, which you define if you wish the particular menu link to launch in a different or new window. For example:

<div class=”menuitems” url=”index.htm”>Dynamicdrive.com</div>
<div class=”menuitems” url=”new.htm” target=”newwin”>What’s New?</div>
<div class=”menuitems” url=”hot.htm”>What’s Hot?</div>

This will cause the second link to be loaded in window “newwin”.

</percede>

Demo:
right-click-configure.txt

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: