MultiColMenu

Jose Medeiros Aug 25, 2006

This menu provides several layers of links. It can also be displayed vertically or horizontally. Very compact and clean, yet quite effective.

The JavaScript Source: Navigation : MultiColMenu

Simply click inside the window below, use your cursor to highlight the script, and copy [Control]+C the script into a new file in your text editor (such as Note Pad) and save [Control+S]. The script is yours!!!

/* This script and many more are available free online at
The JavaScript Source :: http://www.javascriptsource.com
Created by: Jose Carlos Medeiros :: http://www.psabs.com.br */

// Use freely as long as following disclaimer is intact.
// All changes must be sent to me.
//---------------------------------------------------------------
// Menu with Multi Columns v1.0 2006-05-29
// This script was written by Jose Carlos Medeiros <jose at psabs dot com dot br>
// and is a rewriten of:
// Cross Browser Multi-Orientation Menu v1.0 23rd October 2003
// written by Rik Comery. www.ricom.co.uk
//
// For support, sent me a email.
// All rights reserved.

function MultiColMenu(orientation) {
  // Functions
  this.show = _show;
  this.addItem = _addItem;
  this.addSubItem = _addSubItem;
  this.addSubItem = _addSubItem;
  this.hoverMenu = _hoverMenu;
  this.clearMenu = _clearMenu;
  this.popDown = _popDown;
  this.highlightMenu = _highlightMenu;
  this.tdMouseClick = _tdMouseClick;
  this.getOffset = _getOffset;

// Protected variables
  this.isIE = (document.getElementById && document.all)?true:false;
  this.isNS4 = (document.layers)?true:false;
  this.isNS6 = (document.getElementById && !document.all)?true:false;
  this.timmer = '';
  this.obj = (this.isIE)?'document.all':'document.getElementById';
  this.menuItens = new Array();
  this.menuSubItens = new Array();

// Options that can be changed
  
  // Orientation,  can  be "horizontal" or "vertical"
  // default is "vertical"
  this.orientation = (typeof(orientation) == 'undefined')?'vertical':orientation;

// Instance name. When you create a instance of menu, you mus change this property to
  // instance name. ex.
  // test_menu = new MultiColMenu();
  // test_menu.instance_name = 'test_menu';
  this.instance_name = '';

// you can set a delay to submenu
  this.subMenuDelay = 2;

// You can set a vertical offset to better menu positioning
  this.verticalOffset = 0;

// You can set a horizontal offset to better menu positioning
  this.horizontalOffset = 0;

// default submenu columns number
  this.menu_number_columns = 5;

// Here you can put additional option to tag TD that is cell of menu
  // Ex. this.menu_add_option = 'nowrap';
  this.menu_add_option = '';

// width menu, this will be used in style tag in table
  this.menu_width = '142px';

// background color of menu
  this.menu_bgcolor = '#000000';

// style used to create CSS tags to be used in cells of menu
  this.menu_style_static = 'font-family:Verdana; font-size:8pt; color:#FFFFFF; font-weight:normal; background-color:#568DB1; text-decoration:none;';

// like last option , but this is used to create a hover efect
  this.menu_style_hover = 'font-family:Verdana; font-size:8pt; color:#00FFFF; font-weight:normal; background-color:#06578F; text-decoration:none;';

// cell spacing, this can be used to create a efect of a line between cells
  this.menu_cellspacing = '1';

// default style used in links (tag <a>)
  this.menu_item_style = 'font-family:Verdana; font-size: 9px; font-weight: bold;';

// string put before link in each cell´s menu. You can put <span> to format it
  // ex.   this.menu_beflabel = '<span color="#ffffff">• </span>';
  this.menu_beflabel = '• ';
  
  // these options is equal above menu options, difference is used to set Submenu options
  this.submenu_add_option = '';
  this.submenu_bgcolor = '#06578f';
  this.submenu_style_static = 'font-family:Verdana; font-size:8pt; color:#568DB1; font-weight:normal; text-decoration:none; background-color:#ffffcc;';
  this.submenu_style_hover = 'font-family:Verdana; font-size:8pt; color:#FFFFFF; font-weight:normal; text-decoration:none; background-color:#A6A684;';
  this.submenu_item_style = 'font-family:Verdana; color:#000000; font-size: 9px; font-weight: bold;';
  this.submenu_beflabel = '• ';

this.orientation = orientation;
  if (this.orientation != 'horizontal' && this.orientation != 'vertical') {
    this.orientation = 'vertical';
  }

// when you create a menu link, you must use the same ID to create its submenu links
  // style is a css used in tag style
  // ncol is a number columns used to create submenu links
  // ex. 'Empresa', 'http://www.example.com/empresa.htm",'_top', 'color: #000000;', 0
  function _addItem(id, label, action, target, style, ncol) {
    id = (typeof(id) != 'number')?1:id;
    id = (id > 0)?id:1;
    label = (typeof(label) == 'undefined')?'Menu Item':label;
    target = (typeof(target) == 'undefined')?'_self':target;
    action = (typeof(action) == 'undefined')?'#':action;
    ncol = (typeof(ncol) != 'number')?this.menu_number_columns:ncol;
    style = (typeof(style) == 'undefined')?'':style;
    style = (style == ''?this.menu_item_style:style);
    this.menuItens[id] = new Array(label, action, target, style, ncol);
    this.menuSubItens[id] = new Array();
  }

function _addSubItem(id, label, action, target, style) {
    if (typeof(id) == 'number') {
      i = this.menuSubItens[id].length;
      i = (i > 0)?i:1;
      label = (typeof(label) == 'undefined')?'':label;
      target = (typeof(target) == 'undefined')?'':target;
      action = (typeof(action) == 'undefined')?'':action;
      style = (typeof(style) == 'undefined')?'':style;
      style = (style == ''?this.submenu_item_style:style);
      this.menuSubItens[id][i] = new Array(label, action, target, style);
    }
  }

function _show () {
    if (this.instance_name == '') {
      alert('You must define, this.instance_name with instance name of menu !!');
      return false;
    }
    if (this.verticalOffset == 0 || this.verticalOffset == '')
      this.verticalOffset = (this.orientation == 'horizontal')?20:-1;
    if (this.horizontalOffset == 0 || this.horizontalOffset == '')
      this.horizontalOffset = (orientation == 'horizontal')?-2:140;

if (this.menuItens.length <= 0) {
      this.addItem();
    }
    // menu styles
    document.writeln ('<style>');
    document.writeln ('.MCMMenuStatic {'+this.menu_style_static+'}');
    document.writeln ('.MCMMenuHover  {'+this.menu_style_hover+'}');
    document.writeln ('.MCMSubMenuStatic {'+this.submenu_style_static+'}');
    document.writeln ('.MCMSubMenuHover  {'+this.submenu_style_hover+'}');
    document.writeln ('</style>');

// main menu
    document.writeln ('<table border="0" cellpadding="0" cellspacing="'+this.menu_cellspacing+'" style="background-color: '+this.menu_bgcolor+'; width: '+this.menu_width+';">');
    if (this.orientation == 'horizontal') document.writeln ('<tr>');

// main menu items
    for (i = 1; i < this.menuItens.length; i++) {
      if (this.orientation == 'vertical') document.writeln('<tr>');
      label = this.menuItens[i][0];
      action = this.menuItens[i][1];
      target = this.menuItens[i][2];
      target = (target?target:'#');
      onclick = (target=='#'?'onClick=\"javascript:return false;\"':'');
      style = this.menuItens[i][3];
      beflabel = (label?this.menu_beflabel:'');
      if (style) style = ' style="'+style+'" ';
     /*onClick="'+this.instance_name+'.tdMouseClick(\'mainLink'+i+'\');"*/
      document.writeln ('<td '+onclick);
       document.writeln ('onMouseOver="'+this.instance_name+'.hoverMenu(); '+this.instance_name+'.popDown('+i+', \'button'+i+'\');"');
       document.writeln ('onMouseOut="'+this.instance_name+'.clearMenu('+i+');"');
       document.writeln ('<div id="button'+i+'"><table border="0" cellpadding="3" cellspacing="0" width="100%">');
       document.writeln ('<tr><td class="MCMMenuStatic" id="cell'+i+'"'+this.menu_add_option+style+'>'+beflabel);
       document.writeln ('<a id="mainLink'+i+'" href="'+action+'" target="'+target+'"'+style+' class="MCMMenuStatic">'+label+'</a></td>');
       document.writeln ('</tr></table></div></td>');
       if (this.orientation == 'vertical') document.writeln ('</tr>');
    }
    if (this.orientation == 'vertical') document.writeln ('</table>');
    else document.writeln ('</tr></table>');

// sub menu items
    for (i = 1; i < this.menuItens.length; i++) {
      if (this.menuSubItens[i].length > 0) {
        // Styles
        document.writeln ('<div id="MENU'+i+'" style="visibility:hidden; position:absolute; z-index:2">');
        document.writeln ('<table border="0" cellpadding="3" cellspacing="1" style="background-color: '+this.submenu_bgcolor+';">');

nlines = (this.menuSubItens[i].length - 1) / this.menuItens[i][4];
        if (nlines > parseInt(nlines)) nlines = parseInt(nlines) + 1;

ncol = 1;
        for (j = 1; j <= (nlines * this.menuItens[i][4]); j++) {
          if (typeof(this.menuSubItens[i][j]) == 'undefined') {
            label = action = target = style = beflabel = '';
          } else {
            label = this.menuSubItens[i][j][0];
            action = this.menuSubItens[i][j][1];
            target = this.menuSubItens[i][j][2];
            style = this.menuSubItens[i][j][3];
            beflabel = (label)?this.submenu_beflabel:'';
          }
          if (style) style = ' style="'+style+'" ';
          if (ncol == 1) document.writeln('<tr>');

// find positioning for sub menus
  function _getOffset (obj, dim) {
    if (dim == 'left') {
      oLeft = obj.offsetLeft;
      if (obj.offsetParent != null) {
        while (obj.offsetParent) {
          oLeft += obj.offsetLeft;
          obj = obj.offsetParent;
        }
      } else if (obj.x)
        oLeft += obj.x;
      return oLeft;
    } else if (dim == 'top') {
      oTop = obj.offsetTop;
      if (obj.offsetParent != null) {
        while(obj.offsetParent != null) {
          oParent = obj.offsetParent;
          oTop += oParent.offsetTop;
          obj = oParent;
        }
      } else if (obj.y)
        oTop += obj.y;
      return oTop;
    } else {
      alert("Error: invalid offset dimension '" + dim + "' in getOffset()");
      return false;
    }
  }

// show sub menus
  function _popDown(param, id) {
    var menu;
    var button;

if (id) {
      oLeft = this.getOffset(eval(this.obj+'("'+id+'")'),'left');
      oTop = this.getOffset(eval(this.obj+'("'+id+'")'),'top');
    }
    
    n = 1;
    while (n < this.menuItens.length) {
      menu = 'MENU' + n;
      if (param == n) {
        if (eval(this.obj+'("'+menu+'")')) {
          eval(this.obj+'("'+menu+'").style.visibility = "visible"');
          eval(this.obj+'("'+menu+'").style.left = '+(oLeft + this.horizontalOffset)+';');
          eval(this.obj+'("'+menu+'").style.top = '+(oTop + this.verticalOffset)+';');
        }
        this.highlightMenu('main', n, '', 'hover');
        if (this.menuSubItens[param].length > 0) {
          for (i = 1; i < this.menuSubItens[param].length; i++) {
            eval (this.obj+'("subMenu'+param+i+'").className = "MCMSubMenuStatic"');
            eval (this.obj+'("subLink'+param+i+'").className = "MCMSubMenuStatic"');
          }
        }
      } else {
        if (eval(this.obj+'("'+menu+'")')) eval(this.obj+'("'+menu+'").style.visibility = "hidden"');
        this.highlightMenu ('main', n, '', 'static');
      }
      n++;
    }
  }

// re-set timer for sub menus
  function _hoverMenu () {
    if (this.timer) clearTimeout(this.timer);
  }

// set timer for sub menus
  function _clearMenu (menu) {
    setDelay = this.subMenuDelay * 1000;
    delay = (this.menuSubItens[menu].length > 0)?setDelay:1;
    this.timer = setTimeout(this.instance_name+'.popDown('+(this.menuItens.length + 1)+');', delay);
  }

// when you click the box, perform the same function as if the user had clicked the hyperlink
  function _tdMouseClick(theElement) {
    eval(this.obj+'('+theElement+').click();');
  }
}

var menu_esquerdo = new MultiColMenu();
  
  // You can see options to be used in MultiColMenu.js file.
  
  menu_esquerdo.instance_name = 'menu_esquerdo';
  
  // line 1
  menu_esquerdo.addItem(1, "MultiColMenu", "", "", "", 3);
  menu_esquerdo.addSubItem(1, "psABS", "http://www.psabs.com.br");
  menu_esquerdo.addSubItem(1, "Download MultiColMenu", "http://www.psabs.com.br/projetos/MultiColMenu/MultiColMenu.zip");
  menu_esquerdo.addSubItem(1, "JavaScript.com (TM)", "http://www.javascript.com/");
  // line 2
  menu_esquerdo.addItem(2, "Linux", "", "", "", 2);
  menu_esquerdo.addSubItem(2, "Debian", "http://www.debian.org", "", "");
  menu_esquerdo.addSubItem(2, "Ubuntu", "http://www.ubuntu.com");
  menu_esquerdo.addSubItem(2, "RedHat", "http://www.redhat.com");
  menu_esquerdo.addSubItem(2, "Kurumin", "http://www.kurumin.com.br");
  // line 3
  menu_esquerdo.addItem(3, "PHP / JS", "", "", "", 3);
  menu_esquerdo.addSubItem(3, "Yellow Duck Framework 2.0", "http://ydframework.berlios.de/");
  menu_esquerdo.addSubItem(3, "P4A - PHP For Applications - PHP Framework", "http://p4a.sourceforge.net/");
  menu_esquerdo.addSubItem(3, "PHP vs. ASP.NET", "http://otn.oracle.com/pub/articles/hull_asp.html");
  menu_esquerdo.addSubItem(3, "FCKeditor - The Text Editor for Internet", "http://www.fredck.com/FCKeditor/");
  menu_esquerdo.addSubItem(3, "TinyMCE", "http://tinymce.moxiecode.com/");
  menu_esquerdo.addSubItem(3, "Free Encryption Software", "http://www.karelma.com/free-encryption-software.html");
  menu_esquerdo.addSubItem(3, "Hide Your Source Code", "http://www.cgiscript.net/cgi-script/csNews/csNews.cgi?database=js_misc%2edb&command=viewone&id=60");
//-->
</script>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

MultiColMenu

Leave a Response

Attention JavaScript Coders

Whitepapers and More