Sandeep's Nook: JavaScript Page

Floating Collapsible Menu

+ Computing Links

+ More Links

Borland Corp.
Bitstream Inc.
-------------------

Microsoft Corp.
Netscape Corp.
Macromedia Inc.
Symantec Corp.
-------------------

+ JavaScript Links

The JS Page
JavaScript Source
Doc JavaScript
-------------------

Home Page
Fitness Page
Quotes Page
Photo Album

On the left of this page in yellow with black border is the floating collapsible menu. The menu will always hover in the same place on the page even when you scroll down the page. In addition to this the menu has collapsible links. Clicking on those links with the + symbol in front would open a hidden bunch of links. Such hidden links are mostly related to the main link which opens them. You can add any number of collapsible links or ordinary links to the menu. You can also add unlimited nested sub-links as shown in the example. You can also completely change the appearance of the menu to best suit your needs. The placement of the menu from the top of the page can be adjusted by the users.

Users could also provide a space on the left of their web pages to accommodate the floating menu as shown in this example. This would prevent the menu from obscuring any content on the webpage.

Note: This script does not work with older browsers like Netscape v4.x but degrades very well.

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

The script is given below:

This goes in the HEAD of the html file:

  <script language="JavaScript" type="text/javascript">   </style>') } function openClose(theID) { if (document.getElementById(theID).style.display == "block") { document.getElementById(theID).style.display = "none"; document.getElementById("tick_"+theID).innerHTML = "+"; } else { document.getElementById(theID).style.display = "block"; document.getElementById("tick_"+theID).innerHTML = "-"; } } // --> </script>

Note the script in the BODY tag:
<body onLoad="placeIt()">

This goes in the BODY of the html file:

<script>typeStart()</script>  <table border="0" width="130" bgcolor="#ffffff" cellpadding="2" cellspacing="0" style="background:#ffff00; color:#000000; border:#000000 1px solid"> <tr><td bgcolor="#c0c0c0">Collapsible Menu</td></tr> <tr><td bgcolor="#ffffff" style="font-family:arial, helvetica, sans-serif; font-size:12px; color: blue; line-height: 19px"> <div onClick="openClose('a1')" style="cursor:hand; cursor:pointer"><span id="tick_a1">+</span> <span onMouseOver="this.style.color='#ff0000';this.style.textDecoration='underline';" onMouseOut="this.style.color='#0000ff';this.style.textDecoration='none';">Computing Links</span></div> <div id="a1" class="links">  <div onClick="openClose('b1')" style="cursor:hand; cursor:pointer"><span id="tick_b1">+</span> <span onMouseOver="this.style.color='#ff0000';this.style.textDecoration='underline';" onMouseOut="this.style.color='#0000ff';this.style.textDecoration='none';">More Links</span></div> <div id="b1" class="links"> <a href="http://www.borland.com/" class="link">Borland Corp.</a><br /> <a href="http://www.bitstream.com" class="link">Bitstream Inc.</a><br />-------------<br /> </div>  <a href="http://www.microsoft.com/" class="link">Microsoft Corp.</a><br /> <a href="http://home.netscape.com/" class="link">Netscape Corp.</a><br /> <a href="http://www.macromedia.com" class="link">Macromedia Inc.</a><br /> <a href="http://www.symantec.com" class="link">Symantec Corp.</a><br />-------------<br /> </div> <div onClick="openClose('a2')" style="cursor:hand; cursor:pointer"><span id="tick_a2">+</span> <span onMouseOver="this.style.color='#ff0000';this.style.textDecoration='underline';" onMouseOut="this.style.color='#0000ff';this.style.textDecoration='none';">JavaScript Links</span></div> <div id="a2" class="links"> <a href="http://www.sivamdesign.com/scripts/" class="link">The JS Page</a><br /> <a href="http://javascript.internet.com/" class="link">JavaScript Source</a><br /> <a href="http://www.docjs.com/" class="link">Doc JavaScript</a><br />-------------<br /> </div> <div> <a href="#" class="link">Another Link 1</a><br /> <a href="#" class="link">Another Link 2</a><br /> <a href="#" class="link">Another Link 3</a><br /> </div> </td></tr> </table>    <script>typeEnd()</script>