Dropdown menu

[-saturn-]

Hi.

I've been working on Dave Lindquist's implementation of Using Lists for DHTML Menus to bring it close to a previous, non-Standards menubar we were using before, in order to replace it.

I have attached a ZIP file that contains the source of XHTML, CSS and JS and I'd like you to help me in the following:

Right now Dave's implementation requires you to click on a menu item in order for the submenu to appear/disappear.

I'd prefer the mouse click to make the browser visit the location of the menu item so I made the following change to the .js file:

	actuator.onclick = function() {
		window.location = this.href;
		}

Please tell me if I need to add anything else regarding that issue.

I'd like some help on the following too:

How can the submenus appear when the mouse hovers over them and disappear as it hovers out of them?

I've seen Mike Foster's implementation of such menus (xMenu 4) but I think he specifies an area (as large as the submenu when open) out of which the mouse hides the submenu. Can it happen more easily?


Thanks in advance!

[-saturn-]

May I add that I'm already using the x Library for this site, so if you could combine its powers with what I'm trying to do, it would probably save us some extra coding.

[MikeFoster]

Hi -saturn-,

I guess I'm a sucker for little challenges like this

The original menu code had... well, I think it was only working by accident.

I don't claim it to be perfect, but it worked well for me on Win2K with Opera7, Mozilla1.5, and IE6.

Merry Christmas from Cross-Browser.com

window.onload = function()
{
  initializeMenu("companyActuator", "companyMenu");
  initializeMenu("servicesActuator", "servicesMenu");
  initializeMenu("clientsActuator", "clientsMenu");
  initializeMenu("casestudiesActuator", "casestudiesMenu");
  initializeMenu("showcaseActuator", "showcaseMenu");
}

/*
 * menuDropdown.js - implements an dropdown menu based on a HTML list
 * Author: Dave Lindquist (http://www.gazingus.org)
 * Extensively modified by Mike Foster, cross-browser.com, 19Dec03
 */

var currentMenu = null;

if (!document.getElementById)
    document.getElementById = function() { return null; }

function initializeMenu(actuatorId, menuId)
{
  var actuator = document.getElementById(actuatorId);
  var menu = document.getElementById(menuId);
  if (actuator == null || menu == null) return;

  actuator.menu = menu;
  menu.actuator = actuator;
  
  actuator.onmouseover = function()
  {
    if (currentMenu) {
      this.hideMenu();
    }
    this.showMenu();
  }

  actuator.onmouseout = function(evnt)
  {
    var e = evnt || window.event;
    if (e) {
      var oTo = e.relatedTarget || e.toElement;
      var li = this.parentNode || this.parentElement; // assumes actuator is child of LI
      // has mouse moved out of LI?
      while (oTo && oTo != li) {
        oTo = oTo.parentNode || oTo.parentElement;
      }
      if (!oTo) {
        this.hideMenu();
      }
    }
  }

  menu.onmouseout = function(evnt)
  {
    var e = evnt || window.event;
    if (e) {
      var oTo = e.relatedTarget || e.toElement;
      // has mouse moved out of UL?
      while (oTo && oTo != this) {
        oTo = oTo.parentNode || oTo.parentElement;
      }
      if (!oTo) {
        this.actuator.hideMenu();
      }
    }
  }

  actuator.showMenu = function()
  {
    var m = this.menu;
    m.style.left = this.offsetLeft + "px";
    m.style.top = this.offsetTop + this.offsetHeight + "px";
    m.style.visibility = "visible";
    currentMenu = m;
  }

  actuator.hideMenu = function()
  {
    if (currentMenu) {
      currentMenu.style.visibility = "hidden";
      currentMenu = null;
    }
  }
}

[-saturn-]

What can I say... It works as wished. All I have to do now is embed it in my site.
Merry Christmas to you too, Mike and THANK YOU VERY MUCH!

(so what would YOU like for Christmas? )

[MikeFoster]

You're very welcome

so what would YOU like for Christmas?

• Governments that care about the evolution of their societies - instead of focusing on money and power.
• Corporations that recognize that the current 'open trade' policy amounts to nothing more than slavery.
• Citizens that will open their eyes, take responsibility, and take back their Nation.
• School systems that support the concept of 'discovery' instead of 'memorization'.
• Teachers that aren't afraid to discuss fundamental truths.
• I'd really like to get caught up on my work

That should do it

[-saturn-]

Damn! I just ran out of my Genie lamp rubs...

[ssalter]

Mike,

Fantastic, works like an absolute charm!
But...


Is there a way to add sub menus onto this? For example, the first menu has several dropdown items and it'd be marvelous to be able to have one or more of those submenus to have submenus as well. You see this sort of thing a lot in dhtml and javascript scripts but this css method of doing the menu seems so much more superior, at least in regards to accessability and so on.

Steve

EDITED:

Nevermind, I found a marvelous script at:

http://www.htmldog.com/articles/suck...downs/example/

Hi -saturn-,

I guess I'm a sucker for little challenges like this

The original menu code had... well, I think it was only working by accident.

(snip)

[EvM-Mike]

Mike,

Is there a way to add sub menus onto this?

Actually, I just found this script the other day and I was wondering the same thing???? I am currently using the brainjar top menu, but would love to do this, is there a way to include sub menus?????


Also, I am using Dave's expandable menu example (menu3, the multiple level one). As it is, one has to click on one of the "+" menu items to expand the menu. When you are taken to the new page, you have to click the menu again to expand it if you wanted to go to another page within the same section.

Is there any way for the menu to expand automatically when a page is loaded or perhaps get a version of the javascript that would expand a particular item. If the menu is two deep it would need to expand the two levels, etc, etc.....

Thanks....Mike