- This topic is empty.
March 29, 2011 at 1:14 pm #32177
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, KarenMarch 29, 2011 at 1:26 pm #53307mwarrenMember
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
- and the
- :hover in CSSMarch 29, 2011 at 1:44 pm #53308
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.March 30, 2011 at 12:30 am #53189DogsGhostMember
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.March 30, 2011 at 10:49 am #53053
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:March 30, 2011 at 8:27 pm #70953JohnnybMember
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.March 31, 2011 at 2:31 pm #52927
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.
- The forum ‘CSS’ is closed to new topics and replies.