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 you can create Drag and Drop Menu in your Web Application.

Author: DevASP
Download Source Code : 599_DragnDropNavigation.zip

This article is about how you can create drag and drop menu in your web application. By drag and drop means that the user can change the position of the menu on the page by dragging it over the page.

Steps you will do.

 

Start visual studio and create a new window application.

 

Open the HTML design of your web page and before closing the head tag add the following style tag.

 

<style>

 

.move

{

 width:100%;

 background-color:#99CCFF;

 border-bottom:1px solid blue;

 font-size:14px;

 font-family:vardana;

 font-color:"#33CCAA";

 text-align:center;

}

 

.info

{

 width:100%;

 background-color:#99CCFF;

 border-top:1px solid blue;

 font-size:13px;

 font-family:vardana;

 font-color:"#33CCAA";

}

 

.panel

 

{

 width:150;

 position:absolute;

 border:1px solid blue;

 left:350;

 top:200;

 font-size:13px;

 font-family:vardana;

}

 

.panel a:visited{color:blue;}

.panel a{text-decoration:none;color:blue}

.panel a:hover{text-decoration:none;}

 

#panel a.visited{

text-decoration:none;

}

 

.menu

 

{

 width:100%;

 background-color:lightyellow;

 font-size:13px;

 font-family:vardana;

}

 

</style>

 

 

Now add the following JavaScript functions.

 

 

<SCRIPT LANGUAGE="JavaScript">

 

N = (document.all) ? 0 : 1;

var ob;

var over = false;

 

function MD(e) {

if (over)

{

if (N) {

ob = document.getElementById("panel");

X=e.layerX;

Y=e.layerY;

return false;

}

 

else {

ob = document.getElementById("panel");

ob = ob.style;

X=event.offsetX;

Y=event.offsetY;

}

}

}

 

function MM(e) {

if (ob) {

if (N) {

ob.style.top = e.pageY-Y;

ob.style.left = e.pageX-X;

}

 

else {

ob.pixelLeft = event.clientX-X + document.body.scrollLeft;

ob.pixelTop = event.clientY-Y + document.body.scrollTop;

return false;

}

}

}

 

function MU() {

ob = null;

}

 

if (N) {

document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);

}

 

document.onmousedown = MD;

document.onmousemove = MM;

document.onmouseup = MU;

 

</script>

 

 

Now add the following code in the body of the HTML.

 

<body>

<div id="panel"  class="panel" >

<script language="JavaScript">

function getArray(id)

{

  var splitarray = link[id].split("|");

  return splitarray;

}

 

 

 

function info(i,obj,col)

{

 sublink = getArray(i);

 infobar = document.getElementById("infob");

 infobar.innerHTML = "<img src='pointer2.gif'>  "+sublink[2];

 obj.style.backgroundColor=col;

}

 

 

 

function endi(obj,col)

{

 obj.style.backgroundColor=col;

 infobar = document.getElementById("infob");

 infobar.innerHTML = "<img src='pointer2.gif'> <br>";

}

 

 

 

var link = new Array();

link[0] = ". Devasp|http://www.devasp.com|Visit DEVASP";

link[1] = ". Devasp|http://www.devasp.net|Visit DEVASP";

link[2] = ". Yahoo|http://www.yahoo.com |Visit Yahoo";

link[3] = ". MSN|http://www.msn.com |Visit MSN";

link[4] = ". Gmail|http://www.gmail.com|Free Gmail account";

link[5] = ". Google|http://www.google.com |Visit google";

document.write("<div class='move' onmouseover='over=true;' onmouseout='over=false;' style='cursor:move'><font color=red><b>JavaScript  Source</b></font></div><div class='menu'><br></div>");

 

for(i=0;i<link.length;i++)

{

  sublink = getArray(i);

  document.write("<a href='"+sublink[1]+"'><div class='menu' onmouseover=\"info("+i+",this,'gold')\" onmouseout=\"endi(this,'lightyellow')\" style='cursor:hand'>  "+ sublink[0] +"</div></a>");

}

  document.write("<div class='menu'><br></div><div class='info' id='infob' name='infob'><img src='pointer2.gif'> <br></div>");

 

</script>

 

</div>

 

 

<center>

Dont forget to visist Devasp<br>

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

</center>

 

</html>

 

 

Run your application.

 

 

 

 

 

 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How you can create Dynamic Fading Links in your Web Application.

Disclaimer - Privacy
© 2002-2017 DevASP.net