<< ListControl.AppendDataBoundItems | Home | TreeView With SiteMapDataSource >>

Creating a Simple Context Menu

Context Menu's can be used to provide the help or displaying additional information to the user. You can easily create a simple context menu using JavaScript and plain old HTML. Check out the code:

And here is the complete code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<style>

 

.DivStyle

{

position:absolute;

left:100px;

top=200px;

z-index:999;

visibility:hidden;

}

</style>

 

 

<title>Untitled Page</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<a href="#" onmouseover="ShowHelpMenu(event)" onmouseout="HideHelpMenu()">Todays Task</a>

<div id="MyDiv" class="DivStyle">

<iframe src="Help.htm" frameborder="0" scrolling="no">

</iframe>

</div>

</div>

</form>

</body>

</html>

<script language="javascript" type="text/javascript">

function ShowHelpMenu(e)

{

document.getElementById("MyDiv").style.left = e.clientX;

document.getElementById("MyDiv").style.top = e.clientY;

document.getElementById("MyDiv").style.visibility = "visible";

}

function HideHelpMenu()

{

document.getElementById("MyDiv").style.visibility = "hidden";

}

 

</script>

Print | posted @ Sunday, August 20, 2006 5:44 PM

Twitter