View Full Version : Highlighting only selected li

12-02-2009, 07:23 PM
As you can see, I'm new to this forum, so hello to all of you. Like many of you I'm sure, I'm a freelance programmer trying to make ends meet.

Anyway, on my current project, I have a small effect I'm trying to make work that is just kicking my butt. It seems like it is probably simple and I am just missing something or doing something wrong that more experienced eyes could spot. Basicallly, I have navigation based on a ul list, and when you click on any of the li's, it changes the content of a the box located below it. All this works fine. And the hover effect I have on the li's of changing them to be white works fine as well.

The last thing I wanted to do was to make it so that the li's stay white when they are selected, so it is a visual cue to the user which section they are viewing. That effect itself works fine, using the class/id method where I assign a class to the parent element that overrides the default color of the element (grey). Now, my problem is that while the effect works, when I change my selection in the nav, the white color won't be removed from the previous selection until I hover over that li. I have checked using Firebug to be sure that the rule is actually getting changed when a new li is selected, and it is, so the problem is just that even though it correctly removes the class, it doesn't remove the white until the user hovers or mouses over the previously selected li. This obviously takes away the UI value of the effect. So does anyone know a way to make it so that the color will change instantly using the class changing method I have now? I've tried other methods using animate and Jquery and they just got ugly because they added inline styles to the fray. Any and all help is appreciated. Thanks guys.

12-02-2009, 07:45 PM
Hello Demper,
I'm having a little trouble visualizing how your class can keep that li white even though you've clicked on another link. It's stays white untill you hover over it?
Can we get a link to the demo site?

Have a look at these demonstrations I put together of menus that indicates what page your on.

one (http://nopeople.com/CSS/h_ul_menu-with_images/index.html)
two (http://nopeople.com/CSS/css%20rollover%20navbar%20with%20single%20image/pricing.html)

12-02-2009, 07:55 PM
I probably should have mentioned that this particular ul li navigation contains no a tags, it is just being used to change the content of a nav box.

As for the CSS being used to manipulate it, here it is:

#topnav {
background: #151213;
height: 34px;
outline: none;
padding-top: 7px;

#topnav ul li{
height: 25px;
color: #bdbdc5;
outline: none;

#topnav ul li:hover{
color: #fff;

.products_and_solutions #nav_main_01, .systems_integration #nav_main_02, .other_services #nav_main_03, .contact #nav_main_04 {
color: #fff;

And here is the actual markup for that:

<div id="topnav">
<li id="nav_main_01" onclick = "return changeNav(this);">Products and Solutions</li>
<li id="nav_main_02" onclick = "return changeNav(this);">Systems Integration</li>
<li id="nav_main_03" onclick = "return changeNav(this);">Other Services</li>
<li id="nav_main_04" onclick = "return changeNav(this);">Contact</li>

12-02-2009, 08:02 PM
Also, Excavator thanks for your reply and I see how the method you provided works if you are going to a new page when selecting a different li, but my problem is that I am staying on the same page and while the effect is technically working properly, it won't render correctly until the user rolls over the previously selected li. I am starting to wonder whether what I am trying to do here is possible, at least as I currently have it built.

12-02-2009, 08:21 PM
I think it's in your script function changeNav(e){.
While there are several errors the validator finds but I don't think any of them would cause this. Just in case though... they are very simple things to fix. Have a look at http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.eutawstreetbleachers.com%2Fclairvoyant%2F

12-02-2009, 08:29 PM
In your script you have, example: document.getElementById('topnav').className = 'products_and_solutions';

But nowhere in your pages can I find <class="products_and_solutions">

12-02-2009, 08:34 PM
The script applies the class to the #topnav element, which with the rule .products_and_solutions #nav_main_01, .systems_integration #nav_main_02, .other_services #nav_main_03, .contact #nav_main_04 {
color: #fff;
will automaitcally make the selected li white. So that part works. It's just that when you select a new li, while that one will become white, as it should, the previously selected li remains white until you rollover, because it won't render the change until the user interacts with it in some way.

12-02-2009, 08:41 PM
The script applies the class to

Der, I see now.

12-02-2009, 08:43 PM
Dude it's no big deal. Thanks for all your help. Like I said, I'm not sure this is possible, at least how I'm trying to do it, but I think I've seen effects like this out there on the web so I'm just trying to work thorugh it.