Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How can We add a Context Menu in our web page

Author: DevASP
Download Source Code : 638_ContextMenu.zip

This article is about how you can add a context menu to your webpage. What's a context menu? Well, it's a custom menu that pops up in place of the default context menu when you right click your mouse.

Steps you will do.

 

Start visual studio and create a new web application.Open the HTML code of your web form and add the following style tag before closing the head tag. This style is used to implement the style in the context menu.

 

 

<style>

 

.skin0{

position:absolute;

width:165px;

border:2px solid black;

background-color:menu;

font-family:Verdana;

line-height:20px;

cursor:default;

font-size:14px;

z-index:100;

visibility:hidden;

}

 

.menuitems{

padding-left:10px;

padding-right:10px;

}

 

</style> 

   

Now add the following HTML code to design the layout of your web page.

 

 

<body MS_POSITIONING="GridLayout">

 

<form id="Form1" method="post" runat="server">

 

<div id="ie5menu" class="skin0" onMouseover="highlightie5(event)" onMouseout="lowlightie5(event)" onClick="jumptoie5(event)" display:none>

 

<div class="menuitems" url="http://www.devasp.com">Devasp.com</div>

 

<div class="menuitems" url="http://www.devasp.com" target="newwin">Devasp.net</div>

 

<div class="menuitems" url="http://www.yahoo.com/hot.htm">Yahoo</div>

<div class="menuitems" url="http://www.msn.com">MSN</div>

 

<div class="menuitems" url="http://www.gmail.com/faqs.htm">Gmail</div>

 

<hr>

 

<div class="menuitems" url="http://www.google.com">Google</div>

</div>

 

Now add the following JavaScript functions.

 

 

<script language="JavaScript1.2">

 

var display_url=0

 

var ie5=document.all&&document.getElementById

var ns6=document.getElementById&&!document.all

if (ie5||ns6)

var menuobj=document.getElementById("ie5menu")

 

function showmenuie5(e){

 

var rightedge=ie5? document.body.clientWidth-event.clientX : window.innerWidth-e.clientX

var bottomedge=ie5? document.body.clientHeight-event.clientY : window.innerHeight-e.clientY

 

 

if (rightedge<menuobj.offsetWidth)

 

menuobj.style.left=ie5? document.body.scrollLeft+event.clientX-menuobj.offsetWidth : window.pageXOffset+e.clientX-menuobj.offsetWidth

else

 

menuobj.style.left=ie5? document.body.scrollLeft+event.clientX : window.pageXOffset+e.clientX

 

 

if (bottomedge<menuobj.offsetHeight)

menuobj.style.top=ie5? document.body.scrollTop+event.clientY-menuobj.offsetHeight : window.pageYOffset+e.clientY-menuobj.offsetHeight

else

menuobj.style.top=ie5? document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY

 

menuobj.style.visibility="visible"

return false

}

 

function hidemenuie5(e){

menuobj.style.visibility="hidden"

}

 

function highlightie5(e){

var firingobj=ie5? event.srcElement : e.target

if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){

if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node

firingobj.style.backgroundColor="highlight"

firingobj.style.color="white"

if (display_url==1)

window.status=event.srcElement.url

}

}

 

function lowlightie5(e){

var firingobj=ie5? event.srcElement : e.target

if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){

if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node

firingobj.style.backgroundColor=""

firingobj.style.color="black"

window.status=''

}

}

 

function jumptoie5(e){

var firingobj=ie5? event.srcElement : e.target

if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){

if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode

if (firingobj.getAttribute("target"))

window.open(firingobj.getAttribute("url"),firingobj.getAttribute("target"))

else

window.location=firingobj.getAttribute("url")

}

}

 

if (ie5||ns6){

menuobj.style.display=''

document.oncontextmenu=showmenuie5

document.onclick=hidemenuie5

}

 

</script> 

 

Finally add the code below this is not necessary.

 

 

<center>

<h3>

Right click the form to display the context menu<br><br>

Dont forget to visit devasp.com<br>                        

<a href="http://www.devasp.com">www.devasp.com</a>

</center>

</h3> 

 

Run your application and right click the mouse button to display the context menu. You can also navigate to the links given in the context menu.

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How we can Get Logical drive Setting and Setting the Volume Label Using Win32 System Services

Disclaimer - Privacy
© 2002-2017 DevASP.net