Should I Try CSS Sprites for this Drop Down?

[grovesk]

Hi – I’ve got this drop down to build and looking for suggestions on how to handle the background images in this menu bar.

Here’s an Image

The menu bar uls to be text as it’s going into a CMS. So, sliding doors, sprites? I’m pretty new to both of these approaches so need some advice.

Thanks, Karen

[grovesk]

hi – bumping this. Really hoping for some guidance here. Thanks in advance

[chrisburton]

Why would you need a sprite?

[grovesk]

Hi Christopher — I don’t know anything about sprites so judging from your question here, I’m guessing that’s not the solution. :) But how do I create those red arrows which need to be flexible widths? Should they be individual gifs? Do I use sliding doors? I don’t know how to build this menu.

[chrisburton]

Ok I used @chriscoyier’s triangle snippet and used pseudo elements to achieve something close to your idea. Although I didn’t take the time to use unordered lists for the markup. Do you get the idea of it?

edit: markup doesn’t work if you put text inside the div. Still working on it.

[grovesk]

Do you have a link?

[chrisburton]

So far I’ve just made the dropdown. Going to lunch right after I type this. Will tackle more after I get back.

[Johnnyb]

Hey Karen,

Are you limited to just using CSS? It may well be possible to do it using just CSS as Christopher is likely going to prove, but as I’m not sure how I thought I’d suggest using jQuery. You can use jQuery to measure the width of the li tag and then use that width to accordingly alter the css values used to make a triangle: https://css-tricks.com/snippets/css/css-triangle/.

Just an idea I thought I’d throw out there!

John

[chrisburton]

Johnny, exactly what I went for when I saw this.

Karen, Here is an update of the menu you want (still not finished). However, I’m sure this is going to need jQuery to be compatible.

[grovesk]

Thanks guys…I’ll have a look at this:

On the JQuery question, this is the answer I got form my developer.

“Dropdown functionality (not talking about rounded corners or shadows here) must be css-based, not javascript. Other than the corners/shadows, is there something about the menus that will make them difficult to implement with just css? If it does have to do with the corners/shadows, the dropdown needs to still work as CSS but could use jquery for adding the visual frills.”

I think you and he are saying the same thing? :)

[chrisburton]

Creating a drowpdown in CSS is simple, it’s the arrow you want that is the difficult part.

[grovesk]

Wow, great. Let me play with this and I’ll post it back up later.

So, another question: Client wants rounded corners AND a drop shadow on the drop down (see original image) and it needs to work down to IE7 (which I think means old school images in each corner?). This seems to be overly complicating an already complicated menu bar. Opinions?

[Johnnyb]

Hey, yeah your developer is right. Essentially if you use jQuery all you will be doing is using it to change the values in the CSS. You’d create the menu as normal using CSS, including the CSS triangle to create the pointed effect at the bottom of each item, just like Christopher did, but then you’d use jQuery to change the width of that triangle to match the width of each item in the menu. If Javascript is turned off or not available in the user’s browser then they’ll still be able to use the menu, but the triangle will be a fixed size and not the correct width – which is not the end of the world. So yep, we’re basically saying the same thing.

[Johnnyb]

Yeah that’s an awkward one. Is it possible to convince them that the menu will have the drop shadow and rounded corners in modern browsers, but in IE8 and below it will have a subtle border and pointed corners? I hate it when clients request all of the modern css features but then want them to work in older browsers that don’t support them.

I guess you could fall back to using the old school methods, but seems like a lot of extra work for such small rounded corners and a subtle drop shadow.

[grovesk]

Yeah….I’m with you. Apparently the client wants it all but is willing to accept that if it’s going to add hours (and mucho $$$) to the project, they’ll go without it

I need to figure out how much time it will take. I’m not even sure how to do an old school drop shadow actually..corners yes, shadows? My head hurts just thinking about it.

[Author]

Posts