The JavaScript Source: Navigation : MultiColMenu

Home

MultiColMenu

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://javascript.internet.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>');

document.writeln ('<td id="subMenu'+i+j+'" class="MCMSubMenuStatic"');
           document.writeln ('onclick="'+this.instance_name+'.tdMouseClick(\'subLink'+i+j+'\');"'+this.submenu_add_option);
           document.writeln ('onMouseOver="'+this.instance_name+'.hoverMenu(); '+this.instance_name+'.highlightMenu(\'sub\','+i+','+j+');"');
           document.writeln ('onMouseOut="'+this.instance_name+'.clearMenu('+i+');"');
          document.writeln ('>'+beflabel+'<a id="subLink'+i+j+'" href="'+action+'" target="'+target+'" class="MCMSubMenuStatic" '+style+'>'+label+'</a></td>');
          ncol++;
          if (ncol > this.menuItens[i][4]) {
            document.writeln('</tr>');
            ncol = 1;
          }
        }
        document.writeln ('</table></div>');
      }
    }
  }
  
  function _highlightMenu(element, mainMenu, dropMenu, state) {
    state = (state == 'hover')?'MCMMenuHover':'MCMMenuStatic';
    if (element == 'sub') {
      // coloquei desta forma para que as celulas vazias dos submenus nao fiquem sempre acesas
      // ja que se eu seguir o  this.menuSubIten soh alcanēarei os itens cadastrados e nao
      // todos os visiveis
      nlines = (this.menuSubItens[mainMenu].length - 1) / this.menuItens[mainMenu][4];
      if (nlines > parseInt(nlines)) nlines = parseInt(nlines) + 1;
      for (i = 1; i <= (nlines * this.menuItens[mainMenu][4]); i++) {
        eval(this.obj+'("subMenu'+mainMenu+i+'").className = "MCMSubMenuStatic"');
        eval(this.obj+'("subLink'+mainMenu+i+'").className = "MCMSubMenuStatic"');
      }
      eval(this.obj+'("subMenu'+mainMenu+dropMenu+'").className="MCMSubMenuHover"');
      eval(this.obj+'("subLink'+mainMenu+dropMenu+'").className="MCMSubMenuHover"');
    } else {
      eval(this.obj+'("cell'+mainMenu+'").className = "'+state+'"');
      eval(this.obj+'("mainLink'+mainMenu+'").className = "'+state+'"');
    }
  }

// 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();');
  }
}

<script type="text/javascript" src="MultiColMenu.js"></script>

<script type="text/javascript">
<!--
/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Jose Carlos Medeiros :: http://www.psabs.com.br */

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>

<script language="JavaScript">menu_esquerdo.show();</script>

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

Sign up for the JavaScript Weekly

internet.com Privacy Policy

[ Contact Us! ]
[ JavaScript Forum ]
[ Submit Your Script! ]

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Whitepapers and eBooks
Intel PDF: Virtualization Delivers Data Center Efficiency Intel eBook: Managing the Evolving Data Center Microsoft Article: BitLocker Brings Encryption to Windows Server 2008 Symantec eBook: The Guide to E-Mail Archiving and Management Microsoft Article: RODCs Transform Branch Office Security Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program		Avaya Article: Advancing the State of the Art in Customer Service Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers Avaya Article: Avaya AE Services Provide Rapid Telephony Integration with Facebook Go Parallel Article: Getting Started with TBB on Windows HP eBook: Storage Networking , Part 1 MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts
Intel Seminar: Efficiencies in Hardware/Software Virtualization HP Webcast: Disaster Recovery Planning Go Parallel Video: Performance and Threading Tools for Game Developers		HP Video: StorageWorks EVA4400 and Oracle HP Webcast: Storage Is Changing Fast - Be Ready or Be Left Behind MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits
IBM TCO eKIT: Your IT Budget is Under Attack, Get in Control IBM Energy Efficiency eKIT: Learn How to Reduce Costs 30-Day Trial: SPAMfighter Exchange Module		Red Gate Download: SQL Toolbelt and free High-Performance SQL Code eBook Iron Speed Designer Application Generator MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos
Microsoft Article: Silverlight Streaming--Free Video Hosting for All Featured Algorithm: Intel Threading Building Blocks - parallel_reduce		HP Demo: StorageWorks EVA4400 MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES