Javascript Menu in Table cells

[SirD]

I was wondering if somebody could help me.

I am new to web development and was wondering if there are any good FREE javascript menus out there (Drop down) that I can use in table cells (For formating) I have been looking every where on the web but no joy so far.

Thanks

SirD

[BlobFisk]

Have you had a look at Dynamic Drive?

Or, this one [webmasterworld.com] here in WebmasterWorld?

If you are putting the menu system in a table cell, you will have to fiddle around with the positioning... It may be worth doing some reading on CSS-P (CSS2) which allows you to position elements on a page.

HTH

[SirD]

Cheers Dude

[isitreal]

To BlobFisk: Your drop menu is the cleanest I've seen anywhere, that's the first one I've seen that actually seems worth the time to implement, thanks a lot for putting that one out here. I'll have to play with that one a bit, but it's what I've been looking for I think.

[BlobFisk]

Thanks isitreal! ;)

[tomda]

Can I have a sticky mail with the URL where I can see the drop down menu.

Thanks

[isitreal]

I played around with this script last night, gave it a challenge, a centered fixed width web page with a left navigation bar.

I made the submenus 3 levels deep. The code doesn't work at all on Netscape 4.04, causes browser freakout, page blinks on and off, I could probably figure that out with enough time but it's easier just not to run it for NN4. That's a CSS error by the way, the page never gets to the point where you can test the script itself.

To get the positioning relative to the link always, I nested the submenu containers inside the menu item navs or <li> tags, absolute, top:0, left:width of nav item minus 2px.

In Netscape 6.2, mozilla 0.9.4, there is a severe display failure, the browser allocates all the space taken by the hidden divs to the left of the nav bar and then starts the content after that, so the code has to test for gecko 0.9 and not write the submenus to the page at all, same for NN 4.04. The submenus do work and align properly however despite that error.

Obviously with left aligned page layout this would not be an issue, since you could place the submenu containers at the bottom of the page and position them absolutely relative to absolute top and left of page, but this would result in font size changes, especially in Mozilla, changing relative to the position of the top of the submenu, an effect I've always not liked. Obviously using images for nav links would resolve that, but then you're back to using images.

For top menus, the ideal would be a 1 pixel table row below the nav items, into which the invisible divs would be placed, resulting in always perfect positioning no matter what the link font sizing was (a table would be mandatory since IE doesn't seem able to display divs with less than about 10 px height, unless there is a workaround for that, I haven't found one though).

I also found an interesting bug in the >= 1.4 mozillas, versions 1.0-1.3 display the third level perfectly, lined up right against the edge of level 2, but the firebirds and mozillas >=1.4 add 3-5 pixels space between the third and second levels, but not between the first and second, this display error was not present on the earlier mozilla versions, or on IE or Opera7.

The drop menus appear but don't work on Opera 5 and 6, they work perfectly on Opera 7, mouseover doesn't activate on the visible submenu so only the first level appears, but the links are dead, I have a suspicion as to what's causing that, I'll see if I can find it.

They work on IE obviously although I haven't checked IE 4 or 5.0, just 5.5.

A friend checked them on Mac IE 5.2 and Safari and they worked fine.

[SirD]

Thanks isitreal

[isitreal]

There's a way to avoid the Netscape6.2 /mozilla 0.9 problem, there's another drop menu script I have that does that, I'm not clear exactly what it does but it doesn't displace the adjoining cell content in that browser, even though it uses a very similar technique, might be a CSS thing.

I found the Opera 5 and 6 problem, I had added a feature in function showLayer(layerName)to test something in opera, then commented out the tests, but Opera 5 and 6 wouldn't execute until I commented out the whole op conditional test, even though it was empty, now it works fine on Opera 5 and 6 too:

else if (what == "dom1") { 
document.getElementById(layerName).style.visibility="visible"; 
if (op)
{
//document.getElementById(subNav).style.width = "";
//document.write(leftPos);
} 
}