?
Solved

Colorize and Tweak Horizontal Nav Menus

Posted on 2011-02-24
4
Medium Priority
?
283 Views
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:

 http://dev.himalayanacademy.com/new_dom.html
  and
http://dev.himalayanacademy.com/css/ha-new.css

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>)

see: http://www.nationalgeographic.com 

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;
color:#000;}

<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>
</ul></li>

but
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.

TIA




0
Comment
Question by:Sivakatirswami
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 

Accepted Solution

by:
Sivakatirswami earned 0 total points
ID: 34981594
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.
0
 
LVL 4

Expert Comment

by:jmnf
ID: 34982664
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.
nav.html

CSS file, wich might be identical in content, but indented.
he-old.css
0
 

Author Comment

by:Sivakatirswami
ID: 34988274
@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:

http://dev.himalayanacademy.com/nav-jm.html

and linked to the css you created:

http://dev.himalayanacademy.com/css/ha-jm.css

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
{
      position:absolute;
      left:-999em;
}

ul.main-nav li.nav1 ul.nav1{
position:absolute;
left:.5em;
}

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

e.g

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

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

http://dev.himalayanacademy.com/new-dom.html

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



0
 

Author Closing Comment

by:Sivakatirswami
ID: 38213716
The solutions offered by others were not complete.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

762 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