Forum Moderators: not2easy

Message Too Old, No Replies

how do you automatically switch styles?

so I can have my navigation highlight to show location

         

Craig_F

1:02 pm on Nov 7, 2003 (gmt 0)

10+ Year Member



I realize it probably take a script of some kind, but what way is easiest?

All I want to do is have the navigation for the section that the user is in to be highlighted while they are in that section.

Calling a different style sheet seems like the best route but how do you do that on the fly?

TheDoctor

1:59 pm on Nov 7, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Have a look at this article [alistapart.com] on alternative style sheets.

Craig_F

2:36 pm on Nov 7, 2003 (gmt 0)

10+ Year Member



just gave that a quick read and it sounds almost like what I need, but I'm not giving the user a choice as is said in the article and I don't want to use cookies.

what I want, for example, is to automatically remove the underline from the "Blue Wigets" link when the user is on the Blue Wigets page.

aevea

3:30 pm on Nov 7, 2003 (gmt 0)

10+ Year Member



There are two ways (I know of) to do that without switching stylesheets. One (recently discussed) is putting an id on the body tag and then cleverly selecting your sectional link.

If you don't mind having your navigation code a little different in different sections, you can give the link you want displayed differently an id and then feed it a different rule from the stylesheet. For example:


#title li a {padding: 3px 7px; background-color: #99b6bb; }
#title a:link {color: #2b545d; text-decoration: none; }
#title a:visited {color: #81651e; text-decoration: none; }
#title a:hover {color: #ec4a28; text-decoration: none; }
#title a:active {color: #fa8; text-decoration: none; }
/* this is the rule for the sectional link */
#title li a#sec {color: #fff; }

So the html for each page has one link with an id="sec"

Adam