Would like link in sidenav highlighted to indicate location

liunx · Jan 12, 2008

I'm working on a new online store where the sidenav is a list of categories like books, dvds etc. As an example of what I'd like to do, when you click on books, it goes to a page that shows the various books available, and the header now says "books". When you select one of the books, you go to a product page where it now has the book name in the header.

I'd like to make it so the link in the sidenav for books is highlighted when ever you are at a book category or product page for a book.

The store is at <a class="postlink" href="http://www.power2u.org/mm5/merchant.mvc">http://www.power2u.org/mm5/merchant.mvc</a>? and is a few days from going live, there is still a lot to do.

This is the css that governs the sidenav:

Code:
#sidenav {
background-color: #D0E0D3;

}

#sidenav a {
display: block;
padding-bottom: 5px;
padding-left: 4px;
padding-right: 0px;
padding-top: 5px;
text-decoration: none;
}

#sidenav a:visited {
color: #333399;
}

#sidenav a:hover {
background-color: #77A58C;
color: #FFFFFF;
}

#sidenav li {
border-bottom: 2px solid #77A580;
padding: 0;
text-align: left;
}

#sidenav ul {
font-size: 1.3em;
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}

This is the html for the sidenav list:

Code:
<table width="170" border="0" align="left" cellpadding="0" cellspacing="0" height="400">
<tr><td align="left" valign="top" bgcolor="#D0E0D3" id="sidenav">
<ul class="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"merchant.mvc?Screen=CTGY&Store_Code=NEC&Category_Code=pace">PACE Series</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"merchant.mvc?Screen=CTGY&Store_Code=NEC&Category_Code=curricula">Curricula</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"merchant.mvc?Screen=CTGY&Store_Code=NEC&Category_Code=dvd-video">DVD's/Videos</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"merchant.mvc?Screen=CTGY&Store_Code=NEC&Category_Code=books">Books</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"merchant.mvc?Screen=CTGY&Store_Code=NEC&Category_Code=cd-audio">CD's/Audio Tapes</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"merchant.mvc?Screen=PROD&Store_Code=NEC&Product_Code=Curricula-HearingVoicesDistressing&Category_Code=hearingvoices">Hearing Voices Curriculum</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"merchant.mvc?Screen=CTGY&Store_Code=NEC&Category_Code=workshops">Workshops</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"merchant.mvc?Screen=CTGY&Store_Code=NEC&Category_Code=donations">Donations</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"merchant.mvc?Screen=SFNT&Store_Code=NEC">Storefront</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"../index.html">NEC Home Page</a></li>
</ul>
</td>
</tr></table>

Thanks in advance for your advise.

Tom Rogers
webmaster for the National Empowerment Center
<a class="postlink" href="http://www.power2u.org">www.power2u.org</a>
<a class="postlink" href="http://www.tomrogerswebdesign.comIf">www.tomrogerswebdesign.comIf</a> you look around here you can find a strategy by Fang for doing that. It involves giving the body an id and styling accordingly based on that additional factor in the selector.I see what you mean.

I'm looking for fangs thing but in the mean time, you could play around with something like...

/*extra css*/
#live {
background-color: #77A58C;
color: #FFFFFF;
}

and in your html

<li><a id="live" href=http://www.webdeveloper.com/forum/archive/index.php/"#">Books</a></li>

You will have to add some extra code to override the effects of the pesudo classes you've used too.

Would like link in sidenav highlighted to indicate location

liunx

Guest