#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    378
    Rep Power
    11

    CSS, Navigation and highlighting a heading


    H all,

    I have a horizontal navigation bar which basically looks like this:

    Thing0 | Thing1 | Thing2 | Thing34

    What I want to do is when I select a link to a new page, I'd like (using CSS) to have that link highlighted so that the user can see which page he is on.

    It's either that or hardcoding the name to each page...but since it's already in the Nav bar, I thought highlighting the link on the nav bar serves as a heading as well...

    Possible?
  2. #2
  3. Cunning Linguist
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2003
    Location
    I used to live at home, now I stay at the house
    Posts
    10,180
    Rep Power
    2039
    Definitely possible, but a pain in the arse, and probably won't be cross browser compatible...

    Much easier done serverside...
  4. #3
  5. Cunning Linguist
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2003
    Location
    I used to live at home, now I stay at the house
    Posts
    10,180
    Rep Power
    2039
    Won't it just be so much easier to just add a .selected class to your style sheet, and hardcode class="selected" in the div of whichever page is loaded?
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    378
    Rep Power
    11
    Sorry, don't follow...it's going to be a small 'un of a website, so I don't really wanna add php scripting to it...can you elaborate a little on your idea?

    I thought about naming all the pages what they're called and then using javascript to print out the page name...but then it's keeping more things in sync...a hassle really.
  8. #5
  9. Cunning Linguist
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2003
    Location
    I used to live at home, now I stay at the house
    Posts
    10,180
    Rep Power
    2039
    Well, if you have pages like contact, home, news..., the links in your header are gonna be for contact, home, news...

    So, in the home page your nav bar would look like...
    Code:
    <span class="somelink">News</span>
    <span class="selected">Home</span>
    <span class="somelink">Contact</span>
    Then, you have css class for "somelink" and selected, and on each page, you just put the class="selected" in the right place...

    See what I mean?
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    378
    Rep Power
    11
    Oh yes yes...that was the rough idea I was going to use with javascript...thanx, got the idea now, just a bit hazy before.



    Ben
  12. #7
  13. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Here's a little variation on ChiefWigs1982's method.

    Since I usually put nav bars in an include file for re-use purposes, the Chief's method wouldn't work for me. What I do is give each link an id. For convenience, I tend to use the page name. Thus;
    Code:
    <ul>
      <li id="home"><a … >Home</a></li>
      <li id="news"><a … >News</a></li>
      <li id="aboutus"><a … >About Us</a></li>
    </ul>
    Then on each page add an appropriate style rule
    Code:
    <style type=text/css">
    #home {       /* or whatever page you're on */
    /* assuming you have black on white, for instance */
        color: #fff;
        background-color: #000;
    </style>
    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo