How would this type of menu bar be coded? I’ve seen a few sites have this dimensional design but created using Flash. How would this be created using CSS?
Content Box With Orange Banner Heading « PSDVIBE – Tutorials and Resources
There are many ways to implement that, depending on how you want it to behave.
Most basically, you could give the current menu item a class and assign the orange bar as a background. There are a lot better ways of doing it, depending on how you are working.
Many ways meaning? I would like to try to implement something similar with the use of CSS. I haven’t found any tutorial sites on how to code it.
Maybe your question is too advanced for me. You can probably draw that bar and the gradients with CSS3, but I don’t think that I personally could do it with only CSS.
You can achieve quite a bit of that with pure CSS3. For example, see this tutorial:
http://www.pvmgarage.com/2010/01/how-to-create-depth-and-nice-3d-ribbons-only-using-css3/
But in reality if you want it to work across the majority of browsers without a bunch of javascript shims, you’re going to need at least one image. Then, as TexasBob says, simply assign a class to the current menu item and use CSS to attach the relevant image or images to that menu item. The exact CSS you would need would depend on exactly what images you’re employing.
Thank you, gentlemen. Looks like I have more testing to do to figure this style out!
I “love” the entire mindset behind that PSD tut. Here’s how to create the graphic, but we won’t tell you word one about how to actually code it into a site. I guess they’re two different areas of implementation, but I don’t see it that way.