VMaxJSTree menu

Features

  • Unlimited depth
  • Customizable appearance
  • Submenus HTML generation on demand
  • Vertical and Horizontal appearance
  • Multiple menus can be used on same page
  • Flexible targeting
  • NN4, NN6, MIE4, MIE5 compatible

    • Basic Example

    Insert the following code between <HEAD> .. </HEAD> tags of your HTML 
    <style>
.VMMenuLink {
  font-family:Arial;
  font-size:14px;
  font-weight:bold;
  text-decoration:none;
  color:#000080;
 }
</style>
<script src="vmaxjstree.js"></script>
<script src="menustruct.js"></script>
    This code includes CSS class for menu links and 2 script includes. First include all neccessary menu functions and second contains definition of menu structure.

    Insert this code inside <BODY .. > .... </BODY> of your html page where you want menu to be placed. 
    <script>
 document.writeln(createMenu(menuroot))
</script>

    Menu structure customization

    Menu structure defined in menustruct.js file Basically it consists of nested structure of menu items constructors. Constructor have first 4 parameters fixed followed by a variable number of nested menu items. Here is simplified example and code for it. 
    var menuroot2 = 
new VMaxMenu(null,null,null,null, 
   new VMaxMenu('label 1','some1.html',null,level1formatter,
      new VMaxMenu('label 1-1','some1-1.html',null,level2formatter,
         new VMaxMenu('label 1-1-1','some1-1-1.html',null,level3formatter),
         new VMaxMenu('label 1-1-2','some1-1-2.html',null,level3formatter)
      ),
      new VMaxMenu('label 1-2','some1-2.html',null,level2formatter,
         new VMaxMenu('label 1-2-1','some1-2-1.html',null,level3formatter),
         new VMaxMenu('label 1-2-2','some1-2-2.html',null,level3formatter),
         new VMaxMenu('label 1-2-3','some1-2-3.html',null,level3formatter)
      ),
      new VMaxMenu('label 1-3','some1-2.html',null,level2formatter,
         new VMaxMenu('label 1-3-1','some1-3-1.html',null,level3formatter),
         new VMaxMenu('label 1-3-2','some1-3-2.html',null,level3formatter)
      )
   ),

   new VMaxMenu('label 2','some2.html',null,level1formatter,
      new VMaxMenu('label 2-1','some2-1.html',null,level2formatter),
      new VMaxMenu('label 2-2','some2-2.html',null,level2formatter),
      new VMaxMenu('label 2-3','some2-2.html',null,level2formatter,
         new VMaxMenu('label 2-3-1','some2-3-1.html',null,level3formatter),
         new VMaxMenu('label 2-3-2','some2-3-2.html',null,level3formatter)
      )
   )
)
document.writeln(createMenu(menuroot2));
    Now let's talk about constructor parameters.
    new VMaxMenu(menuLabel,url,target,formatter,[nested items ...])

    menuLabel Menu label as you see it. Can be almost any HTML code valid to insert in generated link <A ... > </A>
    url url of the page to open or null
    target target window or frame name or null
    formatter Javascript function name to create single item of menu. (several formatters are included in vmaxtree.js file, but you can add custom ones easy, see below more about formatters)

    Note that topmost item in hierarchy is not visible and serves only as container for it's children, thus in the above example it has nulls in all of the params exept children list

    Menu appearance customization

    First of all let's talk about formatters included in this demo.
    function level1formatter(m){
  var s='<table border=0 cellpadding=0 cellspacing=0 width='+menuWidth+'>'
   +'<tr><td>'
   + makeFramed(makeLink(m),level1bg,borderTopLeft,borderBottomRight)
   +'</td></tr></table>'
  return s
}
    This level1formatter(menuItem) is a basic formatter for top level VERTICAL menu appearance. it creates each item as a separate table with a single cell inside. It uses helper functions makeLink(menuItem) and makeFramed(html,bgCol,borderTopCol,borderBottomCol)

    If you want to have horizontal menus, you may use level1Hformatter(menuItem) which creates items as table cells <td>s only, and creates a menu with createHorizMenu(m) function instead of createMenu(m) one. 

    var menuroot3 = 
new VMaxMenu(null,null,null,null, 
   new VMaxMenu('label 1','some1.html',null,level1Hformatter,
      new VMaxMenu('label 1-1','some1-1.html',null,level2formatter,
         new VMaxMenu('label 1-1-1','some1-1-1.html',null,level3formatter),
         new VMaxMenu('label 1-1-2','some1-1-2.html',null,level3formatter)
      ),
      new VMaxMenu('label 1-2','some1-2.html',null,level2formatter,
         new VMaxMenu('label 1-2-1','some1-2-1.html',null,level3formatter),
         new VMaxMenu('label 1-2-2','some1-2-2.html',null,level3formatter),
         new VMaxMenu('label 1-2-3','some1-2-3.html',null,level3formatter)
      ),
      new VMaxMenu('label 1-3','some1-2.html',null,level2formatter,
         new VMaxMenu('label 1-3-1','some1-3-1.html',null,level3formatter),
         new VMaxMenu('label 1-3-2','some1-3-2.html',null,level3formatter)
      )
   ),

   new VMaxMenu('label 2','some2.html',null,level1Hformatter,
      new VMaxMenu('label 2-1','some2-1.html',null,level2formatter),
      new VMaxMenu('label 2-2','some2-2.html',null,level2formatter),
      new VMaxMenu('label 2-3','some2-2.html',null,level2formatter,
         new VMaxMenu('label 2-3-1','some2-3-1.html',null,level3formatter),
         new VMaxMenu('label 2-3-2','some2-3-2.html',null,level3formatter)
      )
   )
)
document.writeln(createHorizMenu(menuroot3));
    level2formatter(m) and level3formatter(m) functions are almost the same and only differs in bgcolor. 
    function level2formatter(m){
  return makeFramed(makeLink(m),level2bg,borderTopLeft,borderBottomRight);
}
    Pretty simple isn't it?

    There are one more special meaning function which you probably would like to change. There is createSubMenu(m) which is used to add a border to submenus. 
    function createSubMenu(m) {
   return makeBordered(createMenu(m),SubBorderColor,menuWidth);  
}


    You can customize colors, menuwidth and CSS style without changing existing formatters with a set of variables defined in vmaxtree.js file. 
    var defaulttarget  ='_self';       // in case null is passed to constructor
var linkCSSclass   = 'VMMenuLink'; // CSS class name for generated link.
var menuWidth      = 120;          // menu width 
var sub_dx         = 40;           // submenu postioning relative to parent 
var sub_dy         = 0;

var nn_line_height = 16;  // generated link line height can't be obtained in NN, 
                          // so value of line height in pixels need to be put here.

// various colors used in formatters.
var SubBorderColor    = '#000000'; 
var borderTopLeft     = '#e0e0e0';
var borderBottomRight = '#999999';
var level1bg          = '#cccccc';
var level2bg          = '#d8d8e0';
var level3bg          = '#e0e0f0';

    Creating custom formattes

    As you probably already noticed, each menu item can have it's own formatter. You can create several different formatters for each menu item style you would like to have in design. Formattes for top-level in hierarchy must return TDs in case of createHorizontalMenu(..) used, in case of formatters for toplevel used with createMenu(..) or for submenus custom formatters must take care about linebreaks itself if needed.

    Generally all that a formatter must do is generate HTML for with link and event handlers with the help of makeLink(m) function, wrap it in some additional HTML and return generated HTML code. Here is an example of a very simple custom formatter used for submenus. 
    function myFormatter(m) {
  var link = makeLink(m);
  var html = ' '+link+"<br>";
  return html;
}


var menuroot4 = 
new VMaxMenu(null,null,null,null, 
   new VMaxMenu('label 1','some1.html',null,level1formatter,
      new VMaxMenu('label 1-1','some1-1.html',null,myFormatter,
         new VMaxMenu('label 1-1-1','some1-1-1.html',null,myFormatter),
         new VMaxMenu('label 1-1-2','some1-1-2.html',null,myFormatter)
      ),
      new VMaxMenu('label 1-2','some1-2.html',null,myFormatter,
         new VMaxMenu('label 1-2-1','some1-2-1.html',null,myFormatter),
         new VMaxMenu('label 1-2-2','some1-2-2.html',null,myFormatter),
         new VMaxMenu('label 1-2-3','some1-2-3.html',null,myFormatter)
      ),
      new VMaxMenu('label 1-3','some1-2.html',null,myFormatter,
         new VMaxMenu('label 1-3-1','some1-3-1.html',null,myFormatter),
         new VMaxMenu('label 1-3-2','some1-3-2.html',null,myFormatter)
      )
   ),

   new VMaxMenu('label 2','some2.html',null,level1formatter,
      new VMaxMenu('label 2-1','some2-1.html',null,level2formatter),
      new VMaxMenu('label 2-2','some2-2.html',null,level2formatter),
      new VMaxMenu('label 2-3','some2-2.html',null,level2formatter,
         new VMaxMenu('label 2-3-1','some2-3-1.html',null,level3formatter),
         new VMaxMenu('label 2-3-2','some2-3-2.html',null,level3formatter)
      )
   )
)
document.writeln(createMenu(menuroot4));

    Terms of use

    Script is absolutlely free for use if and only if this copyright statement is present unchanged in vmaxjstree.js javascript library file (or it's derivative) 
    /*******************************************************
 * VMaxJStree Lib  v1.03                               *
 * (C)2000-2001   Virtual_Max  ( http://come.to/vmax ) *
 * This library and it's derivatives  is  free for use * 
 * if and only if this notice remains unchanged and    * 
 *  present in all copies and derivatives.             *
 * revision: 04/04/2001                                *
 *******************************************************/
    Mirroring of this page and redistributing of this script or it's documentation is strictly prohibited. If you want to list this script in the public domain, please, provide a link to this script home page instead. Why? The reason is simple. I do not like the idea that people will download absolete versions from your mirrors.

    Support

    Any bug reports are always welcome.
    Unfortunately, I can offer only very limited help for free users of this menu, Note that this menu is targeted for serious web content developers and, of course, I can't teach each beginner for free (who is too lazy to learn HTML and JS themselves).

    Download

    Before downloading, please read the terms of use carefully !
    If you do not agree with it, please do not use this script.
    Package: vmaxjstree.zip
    Copyright 2001, Virtual_Max (http://come.to/vmax)