Colorize and Tweak Horizontal Nav Menus

Posted on 2011-02-24
Last Modified: 2012-08-13
We are renovating our site and starting from ground zero. While the design team hashes out "categories" for navigation, I'm modeling away. We want to use the two level horizontal navigation design where the second level is visible (no more pull downs). Our current model is National Geographic. Using Andy Budd's fabulous book "CSS Mastery"  I got pretty far along, but could use some help because I feel a case of classitis coming on, which I would have done, but it did not work so I stopped.

see my hack up here:

What I'm missing now:

1) when the user lands on this page, the main-nav "HOME" should be selected by default and it's associated sub-nav menu be visible from the start.

2) while "HOME" will have the default background colors of the whole main-nav div, we would like to be able to change the background colors of the other menu items as you move across and hover, where the background color of the main-nav top <li> item is also use as the background colour for the sub-menu (nested <ul>)


3) I need to tweak the whole div so that it does not change size when you click on an item. I think that may be as simple as setting a vertical height.

OK...  I started in on the colors thing, by setting a unique class for one top item as a test:
and color in the css, but it is not working, why I don't know. Probably the parent color takes precedence.

.nav-books a:hover, .nav-books a:focus {
background-color: #f0be2b;

<li class="nav-books"><a href="/books">BOOKS</a>
      <ul class="nav-books">
      <li><a href="all-books">All Books</a></li>
      <li><a href="children">For Children</a></li>
      <li><a href="languages">In Other Languages</a></li>
      <li><a href="lexicon">Lexicon</a></li>

a) this is not working
b) the markup for the nav is going to end up with a bit "classitis" , though not too serious, and it may be unavoidable

I suspect that a little jQuery would help, and I'm fine with a bit of JS for a solution if that helps.

Of course, the array of topNavItem[*color*] will have to be made explicit somewhere, so whether the color definitions are done in a jQuery params string or in the CSS with associated class names in the mark up, I guess it amounts to pretty much the same thing, even if the latter means adding a class to each top level nav item.

So if you solution is either with jQuery or using pure CSS plus mark up or a combo... I'm good either way.


Question by:Sivakatirswami
  • 3

Accepted Solution

Sivakatirswami earned 0 total points
Comment Utility
I have since solved this problem, using a class for each of the menu items and it's interior <ul>

So, the query here now has changed: can you provide a better solution? The CSS require 10, three-line entries for each of the ten menus. The "challenge" would be: is there a way to code this that make it even leaner? jQuery would be OK.

Expert Comment

Comment Utility
Saw your question since yesterday, and started working on it, but haven't found a solution for showing first submenu on start.

I'll upload the html and css that i have been using... you had a few extra opening/closing tags that needed to be removed and I also indented the code.

Hope it helps.

HTML file, need to change directory of css link to fit your needs.

CSS file, wich might be identical in content, but indented.

Author Comment

Comment Utility
@jmnf: "I like it." (smile) Thanks for jumping in.

I looked at many sites doing this and I finally accepted that it would be an inevitable requirement to add classes to the html itself. And that is how I got my pure css solution. I copied that html to the file you made, and posted it:

and linked to the css you created:

I also copied my solution to getting the first nav item to be sticky from the start, I just used and override, where all UL's are set off screen, the follow up with a specific location for nav1

ul.main-nav li ul

ul.main-nav li.nav1 ul.nav1{

it works.

The only issue now with your code was: the colors were not being rendered.  I copied all the selectors from my css to your css but only the top nav item changes color, the subnav <ul> does not


.main-nav li.nav8 a:hover, .main-nav li.nav8 a:focus, ul.nav8{
background-color: #ddb886;

the "ul.nav8" + color is being rendered here:

but not with your method using the jQuery.

I do like that the jQuery helps clean up the css, but we may be "working to hard" when the css can do it for us...  now if we could strip all those ten rules from the css and set up a simple array in the jQuery
nav1:#64000;nav2:#ccedfo;  etc. that might help. but then if my content-design-presentation layer team wants to tweak the colors (they will for sure) it may be better to keep it all in the CSS.

"choice paralysis!"  Too many ways to do things and not enough experience to settle on best practice.

so, actually I would also be content with a solution that simply advises on the best practice in this case, (and why) since, it appears we can go either way with the code


Author Closing Comment

Comment Utility
The solutions offered by others were not complete.

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now