Styling the Main Navigation Menu

  • Josh

    #2840

    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

    Kenneth John Odle

    #22214

    I noticed that last night. I think it looks awesome! Especially the matching hover colors.

    Josh

    #22215

    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

    Kenneth John Odle

    #22216

    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:

    http://www.colorzilla.com/gradient-editor/

    http://www.display-inline.fr/projects/css-gradient/#startType=hex&startValue=aaeeff&endType=hex&endValue=3399cc

    And of course, this one is very useful, but I haven’t done much with it (yet!):

    http://css3generator.c

    om/

    Josh

    #22217

    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

    Kenneth John Odle

    #22218

    Well, using a transparent png could eliminate a lot of that.

    Set the color of each item using regular background:#123456

    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.

    Then add 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.

    Josh

    #22219

    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.

    Hmmmmm…..

    Josh

    #22220

    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

    Kenneth John Odle

    #22221

    Wow! I’m suffering from menu envy now. I love the fact that the text also changes color in the hover state. Well done!

    Prasanna SP

    #22222

    Well done!

    (lemon yellow colour in Services menu and it’s child is making my eye tired..)

    Edit: What I meant was hover colour.

Viewing 10 posts - 1 through 10 (of 14 total)

You must be logged in to reply to this topic.