Complicated Drop-Down. Need advice on how to build.

[grovesk]

Hi – I’ve got what I think is a complicated menu to build, but maybe it’s not? How would you go about building this one? (See image)

Drop downs are never my strong point, but this one has me scratching my head. Note the hover background image in both levels as well as the drop shadow in drop down. I think I need to build the buttons as images and have a rollover image, but is there a way to do this with text in a list?

Thanks, Karen

[mwarren]

if you are embedding your font using the @font-face, it seems to be just as simple as adding the background image to your sub menu

[grovesk]

Hi mwarren – I am embedding the font, but how do I get that background image to expand with the text? The background has a unique left and right edge, and each menu item is going to be of varying width.

[DogsGhost]

To get a bg-image like this to stretch with the text you slice the image up into 3 pieces, the left end, right end, and a middle segment. The middle segment would be maybe 10px wide and set to repeat-x as the bg-image. The left and right ends of the image place in using pseudo elements :before and :after, since you want them to appear on hover your selectors would be a:hover:before for the front image and a:hover:after for the end image. Use absolute positioning to get them into place. This being said, I haven’t used pseudo elements with hover so I’m not a hundred percent if it all works together.

[grovesk]

Mmm, pseudo classes eh? I wonder if that might solve a new problem I have run into. I’ve never used pseudo classes so will definitely test that out.

I did get the top level of the menu bar working using sliding doors (see link), but now I’m having problems getting the drop down to function. Every time I had a unordered list item it gets ignored. I think the span is throwing it off?

Here’s the CSS I used:

http://www.grovesdesign.net/clients/jordan/slide.css

[Johnnyb]

Pseudo classes are great but you’ll find they’re not supported in all browsers unfortunately. The easiest way would just be to keep the drop down a fixed width, say 150px, and then wrap any links longer than that onto two lines. Alternatively you could absolutely position 2 divs inside the dropdown, one -20px left for example and the other -20px right. Those would contain your drop shadows.

[grovesk]

Ok, good to know. Does anyone know if the sliding doors will work on the drop down? Anybody seen an example anywhere? I think we’re going to abandon the drop shadow on the drop because we’ve already got so much other stuff going on.

[Author]

Posts