Javascript/CSS DropDown Navigation menus

[jlommori]

I am trying to create a horizontal navigation bar that when the user mouses over a main title (currently all in seperate <div> tags for alignment) a series of options drops down below and the user can then select from the options where they would like to go. This navigation is very common but I can't for the life of me figure out a simple way to do it. I'm new to javascript but am experienced in HTML, CSS and PHP.

Thanks for any help you can offer...

[MichaelBluejay]

You haven't figured out a simple way to do it because there *isn't* a simple way to do it. In a more reasonable world, you could do it with a couple of lines of code. Heck, in a more reasonable world, menus would be *built in* to HTML so you wouldn't have to screw around with duct-taping menus onto your page with Javascript and CSS. But we don't live in a more reasonable world, so this'll take some effort.

First, create the menu you want to appear, e.g.

<ul class=submenu id=widgets onmouseover="showMenu('widgets'); onmouseout="hideMenu('widgets')">
 <li><a href=greenwidgets.html>Green Widgets</a></li>
 <li><a href=bluewidgets.html>Blue Widgets</a></li>
 <li><a href=redwidgets.html>Red Widgets</a></li>
</ul>

It might seem odd that we call showMenu() when we mouseover this menu, since it's already supposed to be visible once we've moused over the menu bar. But trust me, you have to have showMenu() in *both* locations or it doesn't work right.

Notice we assigned a class called "submenu" to the <ul>. That's so we can style it with CSS. One of the definitions will be to make it invisible, because we don't want it to show until there's a mouseover:

<style type=text/css>
.submenu { visibility:hidden; position: absolute}
</style>

We also set the position to absolute, which will let us move it around later.

Now you set a mouseover to call the menu:

<a href=widgetsummary.html onmouseover="showMenu('widgets')" id=widgetsLabel>Widgets</a>

Our menu links to a page called widgetsummary.html so that a click will still take the visitor to someplace useful even if they have Javascript turned off.

Now you need to write Javascript functions that position the menu in the right spot, and show & hide it as requested, like this:

function showMenu(whichMenu) {
setMenuLocation(whichMenu);
submenuObj=document.getElementById(whichMenu);
submenuObj.style.visibility = 'visible';
}

document.onclick=hideAllMenus;

function hideMenu(whichMenu) {
document.getElementById(whichMenu).style.visibility='hidden';
}

function setMenuLocation(whichMenu) {
menuObj = document.getElementById(whichMenu+'Label');
submenuObj=document.getElementById(whichMenu);
submenuObj.style.top = findTop(menuObj)+17;
submenuObj.style.left = findLeft(menuObj);
}

//----------------------------------------------------------------
function findLeft(obj) {
//----------------------------------------------------------------
curleft = 0;
if(obj.offsetParent)
while(1) {
curleft += obj.offsetLeft;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.x)
curleft += obj.x;
return curleft;
}

//----------------------------------------------------------------
function findTop(obj) {
//----------------------------------------------------------------
curtop = 0;
if(obj.offsetParent)
while(1) {
curtop += obj.offsetTop;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.y)
curtop += obj.y;
return curtop;
}

[cmarshall]

I don't suppose it would do any good if I begged you not to do it.

JavaScript rollovers are a pet peeve of mine (and of quite a few usability people). It drives me absolutely stark raving mad to have the page become obscured because I happened to move the mouse near where I was reading, and a $#@! rollover obscured the exact text I was trying to read.

Actually...it's not much of a drive. More of a short putt. ;)

[rocknbil]

If you must use drop-down menus, Google for Suckerfish - those use a minimal amount of Javascript and mostly rely on CSS to do the work.

[cmarshall]

If you must use drop-down menus, Google for Suckerfish - those use a minimal amount of Javascript and mostly rely on CSS to do the work.

How about a 100% CSS solution [cssplay.co.uk]?