Styling the Main Navigation Menu
So I was playing around with the unique ID’s given to each menu item, as well as each sub-menu item… and even each sub-sub-menu item.
What I came up with was an interesting array of unique colors over each menu item. Moreover, you can set each unique hover color as well.
Check it out. http://www.joshlobe.com/
I don’t care much for the current design. But it has given me a LOT of ideas.Mod
Thanks Ken. I’m loving the idea.. I think it just needs some “fine tuning”. I’d like to use gradients, but that’s SOOOO much code for such a simple effect, I’m not sure if it’s going to degrade performance. Each menu item would require it’s own, cross-browser compatible, gradient css.
Do you think CSS loads faster than an image; in regards to hover effect?Mod
Do you think CSS loads faster than an image; in regards to hover effect?
Yes, but I’m not entirely sure.
but that’s SOOOO much code for such a simple effect
Have you tried any of the online CSS gradient generators?
This is my favorite: http://gradients.glrzad.com/
But these are also good:
And of course, this one is very useful, but I haven’t done much with it (yet!):
Yeah, the colorzilla is my favorite. It’s the one I primarily use. However, the ‘glrzad’ looks very promising, thanks! (It has been bookmarked)
So, I have 10 menu items, approx. 15 sub-menu items, and maybe 15 sub-sub-menu items. Each item has a unique id; so 40 new css items. Then, each time requires approx. five lines of css styling for cross-browser gradient.
So, we are at two-hundred lines of css. Then, we have the hover properties, so multiply that by two.
Soooo, approx. four hundred lines of css to style the menu with gradient.
Is this like crazy overkill? Or is this normal from a developmental perspective?Mod
Well, using a transparent png could eliminate a lot of that.
Set the color of each item using regular
Then create two png images, each one pixel wide and however many pixels high your menus are. Create a transparent gradient on each one. The only difference would be that one would be your normal state and the other would be your hover state.
background: url('path to these images')all at one go all of your menu items. Then you would only need one line to define the gradient for all of your images in the normal state and one line to define the gradient for all of your images in the hover state.
Of course, this assumes that you want to use the same type of gradient (say transparent to trasparent black, grey, white, or whatever) for all menu items. But even if you didn’t, you could still create two separate gradient images for each color. That would still reduce your css load. And a transparent png image that’s only 1px wide and maybe 20 or 25 pixels high should still come in around 100-150 bytes. If you use caching, that’s not too great a demand on the server, I think.
I’m not sure if my thinking here makes sense. Basically you are swapping out a fair amount of time in Photoshop for a fair amount of time writing code. Let me know what you think.
Basically you are swapping out a fair amount of time in Photoshop for a fair amount of time writing code.
That’s EXACTLY what I was thinking last night while I was experimenting… funny!
I guess there are two factors I was considering:
1. Which method loads faster.
2. Which method is considered more “best practices”.
I like that the css method automatically adjusts if the width or height of menu items is ever changed in the future. With an image, either the width or the height is going to be fixed.
I’ve been playing around with it a little more. See what you think…
I combined the css for the submenus into the parent menu using css selectors. This cut down on a lot of the code. I ended up only having 20 unique css gradient statements; at 8 css lines per id; ends up with 160 lines of css for an interesting gradient menu.
We shall see where it goes from here 🙂Mod
You must be logged in to reply to this topic.