Expandable Sliding & Floating Links Menu

On the left of this page in yellow is the expandable sliding & floating links menu. Hovering the mouse on top of the word LINKS slides out a links menu. You can add any number of links to the menu to best suit your needs! The menu will always hover in the same place on the page even when you scroll down the page.

Author: Sandeep Gangadharan
Home Page: http://www.sivamdesign.com/home/

The script is given below:

This goes in the HEAD of the html file:

(document.getElementById && !document.all) ? dom = true : dom = false;

function moveIt() {
  if (dom) {document.getElementById('linksBox').style.left = parseInt(document.getElementById('linksBox').style.left) + 220 + "px";}
  if (document.all) {document.all["linksBox"].style.pixelLeft = parseInt(document.all["linksBox"].style.pixelLeft) + 220;}
}

function backIn() {
  if (dom) {document.getElementById('linksBox').style.left = parseInt(document.getElementById('linksBox').style.left) - 220 + "px";}
  if (document.all) {document.all["linksBox"].style.pixelLeft = parseInt(document.all["linksBox"].style.pixelLeft) - 220;}
}

function typeStart() {
  if (dom || document.all) {
    document.write('<div id="linksBox" style="position:absolute; left:-225px; visibility:visible; cursor:hand; cursor:pointer" onmouseover="moveIt()" onmouseout="backIn()">') }
}

function typeEnd() { if (dom || document.all) { document.write('</div>') } }

function placeIt() {
  if (dom) {document.getElementById("linksBox").style.top = window.pageYOffset + place + "px";}
  if (document.all) {document.all["linksBox"].style.top = document.documentElement.scrollTop + place + "px"}
  window.setTimeout("placeIt()", 10); }
// -->
</script>

Note the script in the BODY tag:

<body onLoad="placeIt()">

This goes in the BODY of the html file:

<table border="0" width="210" bgcolor="#ffffff" cellpadding="1" cellspacing="0" class="innerTable">
   <tr><td>
     <div class="theDiv">
      <a href="http://www.microsoft.com/"><b>Microsoft Corp.</b></a>
     </div>
    </td></tr>
   <tr><td>
     <div class="theDiv">
      <a href="http://home.netscape.com/"><b>Netscape Corp.</b></a>
     </div>
    </td></tr>
   <tr><td>
     <div class="theDiv">
      <a href="http://www.macromedia.com"><b>Macromedia Inc.</b></a>
     </div>
    </td></tr>
   <tr><td style="border-bottom: #000000 1px solid">
     <div class="theDiv">
      <a href="http://www.symantec.com"><b>Symantec Corp.</b></a>
     </div>
    </td></tr>
  </table>

</td></tr>
   <tr><td width="210" bgcolor="#c0c0ff">&nbsp;</td>
</tr>
 </table>
<script>typeEnd()</script>