Today is . Page created 12/06/09

Floating Floating Menu Menu





Click on "Moveable Menu" to pick
it up and Double Click to drop it!
Vertical Line Divider

JavaScript can power a floating menu, that actually can 'float' a navigation bar menu to anywhere on the page, with the click of a mouse!.

We have tested the code in IE 8.0, Firefox3.5.5, Opera 10.20, Netscape 9.0.0.6, Flock2.52 and Safari Public Beta 4(528.16). This script worked well in IE 8.0 and Opera 10.20. In all other platforms the effect did not work but it did degrade well with no error messages observed.

Depending on your knowledge of HTML and javascripts, this is an easy three (3) part copy and paste code that goes in both the <HEAD> (No reconfigurations needed) and <BODY> sections of your document. It also makes use of an onLoad event handler inserted directly into the <BODY> tag.

If you need a little refresher on howto add the onload event handler directly into the <BODY> tag, see the below examples:

Default <BODY> Tag ~ No onLoad event handler

<body bgcolor="#000000" text="#ba55dc" link="#fff8dc" alink="#fff8dc" vlink="#fff8dc">

Reconfigured <BODY> Tag ~ onLoad Event Handler Inserted

<body OnLoad="checkVersion4()" bgcolor="#000000" text="#ba55dc" link="#fff8dc" alink="#fff8dc" vlink="#fff8dc">

Once the above sections are done, you now need to insert the <BODY> section of code where there are a few reconfigurations needed.

For Your Information The <BODY> section of code incorporates absolute positioning of the effect. What this means is that no matter where you place the <BODY> section of code, the effect will appear where the absolute positioning is set. If this is a little confusing, just play around with the below settings within the <BODY> section until the effect is positioned where you want it. If you also need a little more in depth refresher on absolute positioning, grab the below link and you are there.
[ Absolute Positioning ]

<div id="object1" style="position:absolute; visibility:show; left:50px; top:50px; z-index:2">
<table border=1 cellpadding=5>

On A Final Note     The section of code within the <BODY> section that calls the links is incomplete or rather missing a section of code for the JavaScript links to function as they were designed. See the below examples of the default (missing section) and reconfigured section.

Default -- Missing Sections

<td>
<br>
<A HREF="javascript:void(0)">Menu Item # 1</A><br>

<A HREF="javascript:void(0)">Menu Item # 2</a><br>

<A HREF="javascript:void(0)">Menu Item # 3</a>
</td>

Horizontal Red Line

Copy and paste the below snipplet of code into the above section that is missing in the default section of code. If you want more than the default number of links, just continue the process with each individual link.

Reconfigured -- With Missing Code Added

<td>
<br>
<A HREF="javascript:void(0)"ONCLICK="open('URL GOES HERE','myannouncer','toolbar=0,scrollbars=1,,location=0,resizable=0,width=800, height=500')">Menu Item # 1</A>

<A HREF="javascript:void(0)"ONCLICK="open('URL GOES HERE','myannouncer','toolbar=0,scrollbars=1,,location=0,resizable=0,width=800, height=500')">Menu Item # 2</A>

<A HREF="javascript:void(0)"ONCLICK="open('URL GOES HERE','myannouncer','toolbar=0,scrollbars=1,,location=0,resizable=0,width=800, height=500')">Menu Item # 3</A>
</td>

For Your InformationTo add more than the default number of links which is three (3), just follow the pattern and add one of the above sections for each additional link.

Define Above Areas Of Reconfiguration

  • URL GOES HERE This is the address of the page you are calling from the link.
  • If the attribute is defined with a zero (0), that arrtibute will "Not" be visible.
  • If the attribute is defined with a one (1), that arrtibute "Will" be visible.
  • The width and height set in pixel (px) size.

Just play around with the above settings until you get the desired effect for your page.

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ]   [ Rate This Page ]   [ Scripts In Conflict ]   Bookmark and Share