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
 

Creating a Floating menu in our Web Application.

Author: DevASP
Download Source Code : 641_FloatingMenu.zip

This article is about how you can create a floating menu in your web application. A cross-browser menu stays static on the left hand corner of the browser via a gentle "floating" action.

Steps you will do.

Start visual studio and create a new web application.Open the HTML source of your web page and add the following HTML code and JavaScript function to create the floating menu and make the navigation links in menu.

 

<body MS_POSITIONING="GridLayout">

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

<center>Scroll down to see the floating menu</center>

<div style="Z-INDEX: 101; LEFT: 296px; POSITION: absolute; TOP: 1112px" runat="server" ID="Div1">

<center>

<h3>Dont forget to visit devasp<br>

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

</h3>

</center>

</div>

</form>

<script>

if (!document.layers)

document.write('<div id="divStayTopLeft" style="position:absolute">')

</script>

<layer id="divStayTopLeft">

<table border="1" width="130" cellspacing="0" cellpadding="0">

<tr>

<td width="100%" bgcolor="#ffffcc">

<p align="center"><b>

<font size="4">Menu</font></b></p>

</td>

</tr>

<tr>

<td width="100%" bgcolor="#ffffff">

<p align="left">

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

<br>

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

<br>

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

<br>

<a href="http://www.msn.com">MSN</a><br>

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

</p>

</td>

</tr>

</table>

</layer>

<script type="text/javascript">

var verticalpos="frombottom"

if (!document.layers)

document.write('</div>')

function JSFX_FloatTopDiv()

{

var startX = 3,

startY = 150;

var ns = (navigator.appName.indexOf("Netscape") != -1);

var d = document;

function ml(id)

{

var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];

if(d.layers)el.style=el;

el.sP=function(x,y){this.style.left=x;this.style.top=y;};

el.x = startX;

if (verticalpos=="fromtop")

el.y = startY;

else{

el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;

el.y -= startY;

}

return el;

}

window.stayTopLeft=function()

{

if (verticalpos=="fromtop"){

var pY = ns ? pageYOffset : document.body.scrollTop;

ftlObj.y += (pY + startY - ftlObj.y)/8;

}

else{

var pY = ns ? pageYOffset + innerHeight :

document.body.scrollTop + document.body.clientHeight;

ftlObj.y += (pY - startY - ftlObj.y)/8;

}

ftlObj.sP(ftlObj.x, ftlObj.y);

setTimeout("stayTopLeft()", 10);

}

ftlObj = ml("divStayTopLeft");

stayTopLeft();

}

JSFX_FloatTopDiv();

</script>

</body> 

 

This is all you will have to do. Now run your application and scroll down your mouse. The menu will also float with your mouse towards the bottom of the web page. Click at any of the link you will be redirected to the specified URL. 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< Creating a Cross Browser Snake game.

Disclaimer - Privacy
© 2002-2017 DevASP.net