CollapseMenu Object Demo 1

Collapsable Menu
Copyright (C) 1999 Dan Steinman; Distributed under the terms of the GNU Library General Public License available at http://www.dansteinman.com/dynapi/

SCRIPT INSTALLATION:

COPY - Insert Between Head Tags: <HEAD></HEAD>
<script language="JavaScript" src="js/dynlayer.js"></script> <script language="JavaScript" src="js/dynlayer-glide.js"></script> <script language="JavaScript" src="js/dynlayer-common.js"></script> <script language="JavaScript" src="js/collapsemenu.js"></script> <script language="JavaScript">  </script> <style type="text/css">  </style>

COPY - Insert Inside Body: <BODY></BODY>
<script language="JavaScript"> document.write(collapse.divStart) </script> <div id="collapseMenuBlock0"> <div id="collapseMenuBlock0Item"> <a href="javascript:collapse.toggle(0)"> <img src="images/stargif.gif" width=20 height=20 border=0 align="top">FIRST MENU</a></div> <div id="collapseMenuBlock0Content"> <UL> <a href="LINK 1" target="_blank">SUB TITLE 1</a><br> <a href="LINK 2" target="_blank">SUB TITLE 2</a><br> <a href="LINK 3" target="_blank">SUB TITLE 3</a><br> <a href="LINK 4" target="_blank">SUB TITLE 4</a><br> <a href="LINK 5" target="_blank">SUB TITLE 5</a><br></UL> </div> <div id="collapseMenuBlock1"> <div id="collapseMenuBlock1Item"><a href="javascript:collapse.toggle(1)"><img src="images/stargif.gif" width=20 height=20 border=0 align="top">SECOND MENU</a></div> <div id="collapseMenuBlock1Content"> <UL> <a href="LINK 1">SUB TITLE 1</a><br> <a href="LINK 2">SUB TITLE 2</a><br> <a href="LINK 3">SUB TITLE 3</a><br> <a href="LINK 4">SUB TITLE 4</a><br> <a href="LINK 5">SUB TITLE 5</a><br> <a href="LINK 6">SUB TITLE 6</a><br> </UL> </div> <div id="collapseMenuBlock2"> <div id="collapseMenuBlock2Item"><a href="javascript:collapse.toggle(2)"><img src="images/stargif.gif" width=20 height=20 border=0 align="top">MENU 3</a></div> <div id="collapseMenuBlock2Content"> <UL> <a href="LINK 1">SUB TITLE 1</a><br> <a href="LINK 2">SUB TITLE 2</a><br> <a href="LINK 3">SUB TITLE 3</a><br> <a href="LINK 4">SUB TITLE 4</a><br> <a href="LINK 5">SUB TITLE 5</a><br> <a href="LINK 6">SUB TITLE 6</a><br> </UL> </div> <div id="collapseMenuBlock3"> <div id="collapseMenuBlock3Item"> <a href="javascript:collapse.toggle(3)"><img src="images/stargif.gif" width=20 height=20 border=0 align="top">MENU 4</a></div> <div id="collapseMenuBlock3Content"> <UL> <a href="LINK 1">SUB TITLE 1</a><br> <a href="LINK 2">SUB TITLE 2</a><br> <a href="LINK 3">SUB TITLE 3</a><br> <a href="LINK 4">SUB TITLE 4</a><br> <a href="LINK 5">SUB TITLE 5</a><br> <a href="LINK 6">SUB TITLE 6</a><br> </UL> </div> <div id="collapseMenuBlock4"> <div id="collapseMenuBlock4Item"><a href="javascript:collapse.toggle(4)"><img src="images/stargif.gif" width=20 height=20 border=0 align="top">MENU 5</a></div> <div id="collapseMenuBlock4Content"> <UL> <a href="LINK 1">SUB TITLE 1</a><br> <a href="LINK 2">SUB TITLE 2</a><br> <a href="LINK 3">SUB TITLE 3</a><br> <a href="LINK 4">SUB TITLE 4</a><br> <a href="LINK 5">SUB TITLE 5</a><br> <a href="LINK 6">SUB TITLE 6</a><br> </UL> </div> <script language="JavaScript"> document.write(collapse.divEnd) </script>

Download the following files and
place them in a directory names js:
dynlayer.js
dynlayer-glide.js
dynlayer-common.js
collapsemenu.js

Instructions for using this script:

Configuring the menu
This is an advanced, complex javascript menu. It uses four external scripts and one internal body script. The background, font and link colors can be changed within the external scripts by simply opening them up in a text editor, such as NotePad, changing them and saving the js file. Remove or altar the CSS code within the internal script to disable or change the effects for it. Make sure you replace the LINKS, TITLES and DESCRIPTIONS with your own.