Cascade Menu

Hejsa.

Jeg sidder her med en kode som jeg ikke kan få rettet rigtigt ind. Det den gør er at vælge en menu og derefter en sub-menu. Det jeg gerne vil ha den til er at åbne en menu, en submenu 2 og derefter en submenu tre før jeg klikker på det ønskede. Hvordan gør jeg det?

I må gerne være specifikke for er helt lost, takker ;)

Her er koden:

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=\"java script: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();');
  }
}