Previous Message
Next Message

Highlight Nav Links (again)

Sent by Dave Pierce on 24 July 2006 17:05


Joseph asked,

> In a previous message I mentioned how  I was attempting to find a way  
> to use CSS to highlight the navigation of my current. Zoe gave me the  
> following tutorials to do that:
>
> http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css
> http://www.456bereastreet.com/archive/200503/ 
> setting_the_current_menu_state_with_css/
>
> Unfortunately, I have one major problem attempting to implement this  
> code. In both tutorials they require the html to have a body id tag.  
> This doesn't work for my site since the body is part of an uneditable  
> region in my template. In other words, I can only set the id in  the  
> template and that will propagate to every page, which would defeat the  
> purpose of the ID tag.
>
> I'd like to use server side script but that's not an option at this  
> point in time. Does anyone have further suggestions using CSS that I  
> could highlight the navigation?

Joseph,

The version that I use is from "Bulletproof Web Design" by Dan  
Cederholm. He just makes a change on each page as needed.

Starting with the first (home) page he adds an id thusly:


<ul id="navlist">
<li id="current"><a href="index.html" >Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">contact us</a></li>
</ul>

Then the next page would be:

<ul id="navlist">
<li><a href="index.html" >Home</a></li>
<li id="current"><a href="products.html">Products</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">contact us</a></li>
</ul>

and so on down the line. All pages would have the following CSS:

#navlist ul #current a{
background: your choice;
color: your choice;
}

That's how I implemented it, and it works without the #body problems.

Dave Pierce
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Possibly related: