[thelist] NavBar, highlighting current link

rudy r937 at interlog.com
Fri Feb 21 15:05:03 CST 2003


> There are lots of solutions

here's another   ;o)

this takes advantage of the CSS cascade

what i do is define common A styles, e.g. font-family, font-size...

  a  { /* common styles */ }

then "add" additional styles if it's a link, e.g. bold

  a:link    { /* additional styles, unvisited links */ }
  a:visited { /* additional styles, visited links */ }

then further "add" even more styles for hover and active, e.g. colour

  a:link:hover    { /* additional styles, unvisited links hovered */ }
  a:link:active   { /* additional styles, unvisited links active */ }
  a:visited:hover  { /* additional styles, visited links hovered */ }
  a:visited:active { /* additional styles, visited links active */ }

using kevin's example nav bar, the About page would have

   <a href="index.html">Home</a>
   <a href="contact.html">Contact</a>
   <a name="about">About</a>
   <a href="moo.html">Contact</a>

i'm not sure if <a name="about.html">About</a> is valid,
so i don't include the "dot html" (just as easy, with my cms)

the key point here is that the About page has some sort of
server-side logic which changes its anchor from HREF to NAME

that's a very small change, requiring very little IF/ELSE logic

no, the "you are here" anchor isn't actually a target of any other
link, i just define it that way so that it gets the same stylistic
treatment as the links beside it

but at least there's no extraneous inline style or other gizmos
to style the anchor when it should probably share a lot of the
styling of the links in the nav bar

the cascade is loverly, innit?


rudy



More information about the thelist mailing list