Multilevel DHTML Menu Expander (Version 1.1)

Turns unordered list <UL> into a multi-leveled menu requiring NO code changes to the HTML webpage.  Script can handle infinite layers.   Setup controls are contained in one easy to use setup file containing detailed instructions.  Options include: position on page, transparency level, expand/collapse all option, single branch expansion option, and expanse/collapse & expand/collapse ALL icon settings).  Source code is heavily commented for developers.  Multiple samples and documentation is provided for guidance.  Look is controlled using CSS.

Tested in: Internet Explorer 6.0, Firefox 1.0, and Netscape 7.2

1. Open ONE file to setup script:
   We will be using groovenGray.htm & EditMe.groovenGray.js (from the examples) as starting points to explain the setup procedure.
   
   Note: ALL EditMe*.js files contained within the download are the same with exception to the setup selections that were made.
   
   • Change setup controls
     
     • DIMENSION, BRANCH CONTROL,  IMAGE, And TRANSPARENCY SETTINGS

       The following is a snap shot of the first half of the "EditMe.groovenGray.js" file:

       // |||||||||||||||| // | Basic Set-up | // |||||||||||||||| // DIMENSION SETTINGS (pixels) [Value MUST NOT be in qoutes]: // Set position from LEFT of page var PagePositionLEFT=290; // Set position from TOP of page var PagePositionTOP=30; // BRANCH CONTROL SETTINGS [Value MUST be in quotes]: // Enable single branch opening ONLY // Options: ['yes'=one branch at a time, ''=all branches will open] // Note: ALL Values other than 'yes' allows user to open more than one branch at a time var oneBranch='yes'; // If selecting this option the "Expand-Collapse ALL" option WILL NOT be available // IMAGE SETTINGS [Value MUST be in quotes]: // Include "Expand-Collapse ALL" option // Options: ['yes'=Shows option, ''=Hides option] // Note: ALL Values other than 'yes' HIDES option var showECOption='yes'; // If oneBranch value is set to 'yes' (above) the "Expand-Collapse ALL" option WILL NOT be available // TRANSPARENCY SETTINGS (%) [Value MUST NOT be in qoutes]: var TValue=70; // 100=100% visible, 0=invisible [MUST BE a number between 0 and 100] // Can be decimal (example: 70.5) or integer (example: 71)

       Each setting has a description provided so please pay careful attention to what each setting does and note any limitations that are placed on them.

       Special Note about dimension and transparency settings:
       When changing these values please keep in mind that the values are NOT to be placed in quotes.  They are numbers.  The Dimensions are values in units of pixels.  However, "px" is NOT required.  The script will do that for you.

       The first two dimension settings allow you to locate the list (menu) on your webpage.  By changing the value of PagePositionLEFT for example you can locate the list with respect to the LEFT hand side of the webpage.  This is also true for PagePositionTOP except you are locating with respect to the top of the page.

       The transparency values are in percentage.  Again, the '%' sign is NOT needed.

       Branch Control and Image setting values on the other hand MUST be in quotes.

        

     • Enter filenames of images

       The second half of the file the "EditMe.groovenGray.js" file is as follows:

       // ||||||||||||||||||||||| // | Define Images Here | // ||||||||||||||||||||||| // All values MUST be in quotes // All images MUST be located in the folder "MDMEImages" // "MDMEImages" folder MUST be located in SAME directory as DHTMLMenuListExpander.js file // Note: Some images have been provided. You may use provided, your own, or none. // Sample images provided can be viewed in the "StartHere.htm" file // If you DO NOT want images attached then leave these values BLANK // HOWEVER, if you leave either 'imageEXPANDALL' or 'imageCOLLAPSEALL' blank make sure // 'showECOption' is also blank // SET [EXPAND] IMAGE FILE NAME: // Filenames of samples provided: // threedPLUS.gif | folderPLUS.gif | SimplePLUS.gif | thickBorderedPLUS.gif | thinBorderedPLUS.gif var imagePLUS ='threedPLUS.gif'; // SET [COLLAPSE] IMAGE FILE NAME: // Filenames of samples provided: // threedMINUS.gif | folderMINUS.gif | SimpleMINUS.gif | thickBorderedMINUS.gif | thinBorderedMINUS.gif var imageMINUS ='threedMINUS.gif'; // IF left blank AND imagePLUS is NOT blank THEN [EXPAND] IMAGE will be present at all times // This scenario can be used for example if you DONT want toggling +/- images // SET [EXPAND ALL] IMAGE FILE NAME: // Filenames of samples provided: // twodEXPANDALL.gif | threedEXPANDALL.gif | folderEXPANDALL.gif var imageEXPANDALL ='threedEXPANDALL.gif'; // IF left blank AND showECOption='yes' (above) THEN text "Expand ALL" will be visible // SET [COLLAPSE ALL] IMAGE FILE NAME: // Filenames of samples provided: // twodCOLLAPSEALL.gif | threedCOLLAPSEALL.gif | folderCOLLAPSEALL.gif var imageCOLLAPSEALL ='threedCOLLAPSEALL.gif'; // IF left blank AND showECOption='yes' (above) THEN text "Collapse ALL" will be visible

       As you can tell there are many comments available for guidance so not much more explanation is required.  Nevertheless, this part of the setup file is where you will tell the application what icon filenames are to be used.  The icon filenames for the samples are provided just above the value.  Please feel free to use these or your own.  However, if you wish to provide your own images please make sure that they are added to the MDMEImages folder.

       Finally, there is one syntax rule to placing the icon filename: Place single quotes around each filename and extension.
       
        

2. HTML List structure
   • The basic structure of the Unordered list that will contain your menu is as follows (Only 3 levels shown - many possible):

   <div id="MDME">
   	<ul> <li>Sub Link (Level 1)</li>
   	<li>... ADD AS MANY LINKS AS YOU LIKE ...</li>
   	<li>Menu Header (level 1)
   	<ul>... ADD AS MANY MENUS AS YOU LIKE ...<ul>
   		<ul> <li>Sub Link (Level 2)</li>
   		<li>... ADD AS MANY LINKS AS YOU LIKE ...</li>
   		<li>Menu Header (level 2)
   		<ul>... ADD AS MANY MENUS AS YOU LIKE ...<ul>
   			<ul> <li>Sub Link (Level 3)</li>
   			<li>... ADD AS MANY LINKS AS YOU LIKE ...</li>
   			<li>Menu Header (level 3)
   			<ul>... ADD AS MANY MENUS AS YOU LIKE ...<ul>
   			</ul>
   		</ul>
   	</ul>
   </div>

   EXAMPLE:

   <div id="MDME"> <ul> <li>Menu one <ul> <li><a href="#">Submenu one</a></li> <li><a href="#">Submenu two</a></li> <li><a href="#">Submenu three</a></li> </ul> </li> <li>Menu two <ul> <li>Submenu one (of Menu two) <ul> <li><a href="#">Sub Link one [of Submenu one (of Menu two)]</a></li> <li><a href="#">Sub Link two [of Submenu one (of Menu two)]</a></li> </ul></li> <li><a href="#">Sub Link two (of Menu two)</a></li> <li><a href="#">Sub Link three (of Menu two)</a></li> <li><a href="#">Sub Link four (of Menu two)</a></li> </ul> </li> <li><a href="#">Menu three</a></li> <li><a href="#">Menu four</a></li> </ul> </div>
    

3. File structure
   • Please notice the MultiLevelDHTMLMenuExpanderV11.js file location in reference to both the CSS, HTML, and image folder below.  The structure should be like the following:

1. Attach three files in <HEAD> of base webpage
   
   • The final installation requirement is to add the references of the two .js files and the CSS style sheet to the HEAD of the webpage that you wish the embed the menu into.  Syntax should be similar to the following:
     
     <script type="text/javascript" language="JavaScript" src="EditMe.groovenGray.js"></script> <script type="text/javascript" language="JavaScript" src="MultiLevelDHTMLMenuExpander.js"></script> <LINK REL="stylesheet" HREF="groovenGray.css" TYPE="text/css">
     
     
     

   ---

   A final note

   This script is provided free for two primary reasons:

   One, to help those out that want such a feature on their website.

   Two, to help out other developers learn and contribute.

   As such, if your primary goal is to install the feature then please do NOT do anything to MultiLevelDHTMLMenuExpanderV11.js.
   
   On the other hand, if you are a developer and on the path to learning more about DHTML or JavaScript then I would encourage you to go through the code, take it apart, add features if you like.  If you do add any features then please contact 4thorder^(TM) through our website and we will post the additions with credit to you.