Make your own free website on Tripod.com

Open MenuBar

Instead of using frames or tables to display the links to the other sections of your page, why not use the Dynamic Menu Bar. This menu, which can contain any HTML tags, moves up and down the page as you do. It is also collapsable, which allows for a greater area of the page to be shown to the viewer. The best part is the ease in which you can customize your Dynamic Menu Bar. There is no need to fiddle with any of the complicated javascript coding.
The source..


<DIV CLASS="menbar1" ID="menbar1" 
STYLE="position:absolute;top:1;visibility:hide;" zIndex="1000" ALIGN="right">
<table bgcolor="#ffffff"><tr><td><A HREF="javascript:change(1)">Open MenuBar</A></td></tr></table>
</DIV>
<DIV CLASS="menbar2" ID="menbar2" 
STYLE="position:absolute;top:1;visibility:hide;display:none;" zIndex="1001" ALIGN="right">
<table bgcolor="#c0c0c0"><tr><td bgcolor="#ffffff">
<a href="javascript:change(2)">Close MenuBar</a><br>
</td></tr><tr><td>


<a href="http://www.your-url.com">Your Links 1</a><br> href="http://www.your-url.com">Your Links 2</a><br> href="http://www.your-url.com">Your Links 3</a><br> href="http://www.your-url.com">Your Links 4</a><br> </td></tr></table> </DIV> <script language="Javascript1.2"> <!-- // original content taken from Yellowhawk33's Page with permission // lack of these three lines will result in copyright infringment // made by: Yellowhawk33 - http://yellowhawk33.tripod.com/index.html var JX = 0; var JY = 0; var wm; if (document.layers){ wm = document.menbar1; } if (document.all) { wm = document.all.menbar1; } function change(wow) { if (document.layers){ if (wow == 1) { wm.visibility = "hide"; wm = document.menbar2; } if (wow == 2) { wm.visibility = "hide"; wm = document.menbar1; } } if (document.all){ if (wow == 1) { wm.style.display = "none"; wm = document.all.menbar2; } if (wow == 2) { wm.style.display = "none"; wm = document.all.menbar1; } } } function menbar() { if (document.layers){ JX = window.pageXOffset; JY = window.pageYOffset; wm.visibility = "hide"; wm.top = JY; wm.left = JX; wm.visibility= "show"; } if (document.all){ if (navigator.appVersion.indexOf("Mac") == -1){ wm.style.display = "none"; JX = document.body.scrollLeft; JY = document.body.scrollTop; wm.style.top = JY; wm.style.left = JX; wm.style.display = ""; } } } setInterval("menbar()",100); //--> </script>

Color coding..


The background color in the table tags control the background color of your dynamic menu bar. Change it accordingly. The first instance is when the menu is collapsed and the second is when open.
These are the links and other HTML that you wish to include in menu when it is open. Do your HTML within the <td> and </td> tags.
Yellowhawk33's Home Page