Kevin Yank's drop down menu

howdy...I am implementing Kevin Yanks excellent drop-down menu on a site of mine. I am encountering some unforeseen problems and would like some dHTML gurus to take a look and make some suggestions. To be fair, the menu in it's unaltered state works perfectly in both IE and NS (does it work in AOL?) The problem lies in the fact that I am making some pretty substantial edits/additions.

The mockup can be found at:
http://www.nashvillecvb.com/dev

Here are the problems I am encountering and would like solutions for:

1) The menu was designed for use in a left-aligned site. On my intro page ONLY, the menu will be center-aligned. The problem with this is that fact the the DIV's rely on absolute postioning. How can I overcome this?

2) The original menu used only one background color for each menu. I want to use a different background color for each menu. I have accomplished this in IE by creating duplicate styles for each menu item, then changing the bg color. But as you might expect, it does not work in Netscape. I have narrowed it down to the part that I must change/add to in NS, but I don't know how to proceed.

In Netscape, the DIV that contains the actual text just covers the text itself.

3) I would like to know if it possible to make each menu a different width? As you can see from the mockup, each button is a different width, and I would like the menu's to be the same width. This one is not that important as I can change the images themselves if I need to.

thanks in advance.

bueller?

Any updates on this folks? If I can't solve the problem I might have to switch to another menu format.

Kevin?

I'm back, I'm back already! :D

Let me give a glossy answer to each of your questions before I hop in bed for the night. If you're still stumped on any of them due to my half-bummed responses, feel free to post back. :yawn:

Quote:

1) The menu was designed for use in a left-aligned site. On my intro page ONLY, the menu will be center-aligned. The problem with this is that fact the the DIV's rely on absolute postioning. How can I overcome this?

Unfortunately, absolute positioning is a concession I had to make for the sake of cross-browser compatibility. Try as I might, I couldn't get all major browsers to agree on how a relative-positioned menu was to be displayed, let alone multiple relative-positioned menus (you'd be surprised at how much trouble ensued when they overlapped!). Either the menu was shifted slightly down vertically in Opera, or Netscape was displaying the borders of the menu wrong... in the end I had to be contented with an absolute-positioned menu.

One thought might be to try using some funky DOM code to determine the absolute position of your first menu button and then dynamically derive the absolute positions of the menus from that information. That sounds to me like the kind of thing that would only be possible in NS6 or MSIE 5+.

Quote:

2) The original menu used only one background color for each menu. I want to use a different background color for each menu. I have accomplished this in IE by creating duplicate styles for each menu item, then changing the bg color. But as you might expect, it does not work in Netscape. I have narrowed it down to the part that I must change/add to in NS, but I don't know how to proceed.

In Netscape, the DIV that contains the actual text just covers the text itself.

The menu items take their background colour from this piece of CSS:

Code:

/** * Sets style attributes for popup menu items. * Note the 'width' and 'height' properties, which are * required for Opera compatibility. These values must * match the menuItemWidth and menuItemHeight JavaScript * values above. */ .menuitem { position: absolute; left: 1px; width: 118px; height: 19px; background-color: #FFFF99; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; cursor: pointer; } /** * Sets style attributes for highlighted popup menu items. * Note the 'width' and 'height' properties, which are * required for Opera compatibility. These values must * match the menuItemWidth and menuItemHeight JavaScript * values above. */ .menuitemon { position: absolute; left: 1px; width: 118px; height: 19px; visibility: hidden; background-color: #0099FF; color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; cursor: pointer; }

At first glance, you'd think that all there is to changing the background colours of the menus is to give a different CSS class to each style of menu item you want to have. Indeed, this is all you have to do for NS6, MSIE, and Opera.

Netscape 4 is (as usual) a little more troublesome. If you look at the setupMenus() JavaScript function closer to the top of the page, you'll find a big section of code that begins with a comment "This section is for Netscape 4 only". In it, you'll find a for() loop that does serveral set-up tasks for each menu item in the page. Among the things that loop does is the following:

Code:

// Dynamically set the 'clip' dimensions and background colors // of each of the menu items. Again, we're forcing NSN4 to // fill the full width and height of each menu item. item.clip.width = menuItemWidth; item.clip.height = menuItemHeight; item.document.bgColor="#FFFF99"; onitem.clip.width = menuItemWidth; onitem.clip.height = menuItemHeight; onitem.document.bgColor="#0099FF";

Notice the colour codes. That's what's causing Netscape to stick with the same old colours. You can change these colour values to make Netscape use those colours for all menu items. Using the 'menuid' and 'i' variables (to identify the menu and menu item currently being coloured, respectively) you can add if-else statements to use alternate colours for particular menus or menu items. If you want to take it to extremes, you could create an array to store all the colours to be used by all the menu items... but I think that would be overkill for most practical purposes.

Quote:

3) I would like to know if it possible to make each menu a different width? As you can see from the mockup, each button is a different width, and I would like the menu's to be the same width. This one is not that important as I can change the images themselves if I need to.

Yes, it's possible, but again it's more than a matter of altering the CSS. Look for all the places in the JavaScript where the menuItemWidth and menuItemHeight variables are used. Those are the places where you'll have to get clever and make sure the values you want are used for the menus/menuitems you want.

Hope that helps!

well darn...

the second two questions are really dependent on the first. If I can't reliably center the menu, then I will just have to get myself a new giant.
<end obscure quote>

Seriously, I will either have to find a way of centering it or just scrap the menu on the first page.

By the way Kevin...here is a mockup for you to peruse.

www.nashvillecvb.com/dev

It is not funtional yet, but you can drill down in specified locations.

Select Visitors & Friends > Dining

Once there, Select Mexican (from the Type menu)

Once there select the top result (La Paz)
Refresh the page until you get "Downtown" as the random selection on the right, then click downtown.

That's all there is for right now. The site is being developed in ASP so we will have DB options.