DHTML Menu Expander (Version 2.0)

Menu system (vertical or horizontal) that allows for "click to expand/collapse" submenu selections.  Script requires only a simple table structure contained within DIV element - NO other HTML code changes required.  Setup controls are contained in one easy to use setup file containing detailed instructions.  Options include: transparency, Handler type (mouseover or click), single branch expansion option, and expanse/collapse icon placement settings.  Multiple samples and documentation is provided for guidance.  Menu look is set with CSS.

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

• Change setup controls
  

  • The following is a snap shot of the first half of the "EditMeHsample4.js" file:

    // |||||||||||||||||| // | Basic Set-up | // |||||||||||||||||| // 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'; // EVENT TYPE SETTINGS [Value MUST be in quotes]: // Options: // 'mouseover'= branch expands when mouse is OVER <TH> element // 'click'=branch expands when <TH> element is clicked var handlerTYPE='mouseover'; // TRANSPARENCY SETTINGS (%) [Value MUST NOT be in quotes]: 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) // Does not work in Opera // IMAGE PLACEMENT [Value MUST be in quotes]: // Options: // 'before'=images will be inserted BEFORE content within <TH> element // 'after'=images will be inserted AFTER content within <TH> element // ''=images will NOT be included within <TH> element var ImagePlacement='after';

    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 transparency settings:
    When changing this value please keep in mind that the value is NOT to be placed in quotes.  They are numbers that represent % (percentage) of VISIBILITY.  For example is you would like for the menu to be 80% visible (20% transparent) then use the number 80.  The '%' sign is NOT needed.

    All other settings (BRANCH CONTROL, EVENT TYPE, IMAGE PLACEMENT) values MUST be in quotes.

     

  • The second half of the "EditMeHsample4.js" file:

    // ||||||||||||||||||||||| // | Define Images Here | // ||||||||||||||||||||||| // [Value MUST be in quotes] // All images MUST be located in the folder "DMEImages" // "DMEImages" folder MUST be located in SAME directory as the webpage that you want the menu to be on // 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 // SET [EXPAND] IMAGE FILE NAME: // Filenames of samples provided: // threedPLUS.gif | SimplePLUS.gif | thickBorderedPLUS.gif | thinBorderedPLUS.gif | bevArrowPLUS.gif var imagePLUS='bevArrowPLUS.gif'; // SET [COLLAPSE] IMAGE FILE NAME: // Filenames of samples provided: // threedMINUS.gif | SimpleMINUS.gif | thickBorderedMINUS.gif | thinBorderedMINUS.gif | bevArrowMINUS.gif var imageMINUS ='bevArrowMINUS.gif';

    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 DMEImages folder.

    Please NOTE: The "DMEImages" folder MUST be located in SAME directory as the webpage file that you want the menu to be on.
    
    Finally, there is one syntax rule to placing the icon filename: Place single quotes around each filename and extension.

HTML <TABLE> structure

• The basic structure of the 2 table structure types that will contain your menu are as follows (vertical or horizontal):
   

  VERTICAL MENU TYPE

  <DIV id="menuSystem"> <TABLE id="mainTable">     <TR><TD>         <TABLE>           <TR><TH>Menu selection title (if no rows then can be a link)</TH></TR>           <TR><TD>link</TD></TR>                    ... place as many links as you like ...           <TR><TD>link</TD></TR>         </TABLE>     </TD></TR>     ... place as many sections as you like ...     <TR><TD>         <TABLE>           <TR><TH>Menu selection title (if no rows then can be a link)</TH></TR>           <TR><TD>link</TD></TR>                    ... place as many links as you like ...           <TR><TD>link</TD></TR>         </TABLE>      </TD></TR> <TABLE> </DIV>

  HORIZONTAL MENU TYPE

  <DIV id="menuSystem"> <TABLE id="mainTable">      <TR>        <TD>         <TABLE>           <TR><TH>Menu selection title (if no rows then can be a link)</TH></TR>           <TR><TD>link</TD></TR>                    ... place as many links as you like ...           <TR><TD>link</TD></TR>         </TABLE>        </TD>     ... place as many sections as you like ...        <TD>         <TABLE>           <TR><TH>Menu selection title (if no rows then can be a link)</TH></TR>           <TR><TD>link</TD></TR>                    ... place as many links as you like ...           <TR><TD>link</TD></TR>         </TABLE>        </TD>      </TR> <TABLE> </DIV>

File structure

• Using example DMEHorizontalSample4.htm
   

  /root (directory containing menu)     /DMEImages Folder containing icon images   DHTMLMenuExpanderV2.js (Core JavaScript File)   EditMeHsample4.js (Setup JavaScript File)   DMEHorizontal.css (Cascade Style Sheet defining look)   DMEHorizontalSample4.htm (Base webpage containing HTML and references)

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="DHTMLMenuExpanderV2.js"></script> <script type="text/javascript" language="JavaScript" src="EditMeHsample4.js"></script> <LINK rel="stylesheet" type="text/css" href="DMEHorizontal.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 DHTMLMenuExpanderV2.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.