/* 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 */ 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 = '135px'; // background color of menu this.menu_bgcolor = '#F7F5EE';// BF3501 - F7F5EE // style used to create CSS tags to be used in cells of menu this.menu_style_static = 'font-family:Arial; font-size:12pt; color:#F7F5EE; font-weight:normal; background-color:#01619D; text-decoration:none;'; // like last option , but this is used to create a hover efect this.menu_style_hover = 'font-family:Arial; font-size:12pt; color:#01395C; font-weight:normal; background-color:#EDE6D3; 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 ) this.menu_item_style = 'font-family:Arial; font-size: 12px; font-weight: normal;'; // string put before link in each cell´s menu. You can put to format it // ex. this.menu_beflabel = '• '; 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')?'centre':target; // _self 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 (''); // main menu document.writeln (''); if (this.orientation == 'horizontal') document.writeln (''); // main menu items for (i = 1; i < this.menuItens.length; i++) { if (this.orientation == 'vertical') document.writeln(''); 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 (''); if (this.orientation == 'vertical') document.writeln (''); } if (this.orientation == 'vertical') document.writeln ('
'); document.writeln (''); document.writeln ('
'+beflabel); document.writeln (''+label+'
'); else document.writeln (''); // sub menu items for (i = 1; i < this.menuItens.length; i++) { if (this.menuSubItens[i].length > 0) { // Styles document.writeln (''); } } } 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();'); } }