SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to make a button and or tab in a Nav bar remain down when clicked.

    I recently created a practice web page with only the first link working, meaning only the first button links to another page, it a work in progress.

    What I'm trying to do is make the button stay down when it is clicked, this will indicate what page the visitor is on.

    So lets say you click on the second button or tab,I need that tab to remain down or as it appears in the rollover state. I mean the page can function without this but I would still like to know for other future developments and my knowledge. How do I get each of the buttons to remain in the hover or down state? There are only two states.

    I would greatly appreciate any suggestion and or comments.

    Thanks everyone.

    Patrick - Minnesota

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are at least two ways.

    If you have static pages with the nav bar hard-coded on each page, or a dynamically generated page, you can simply assign a class or an ID to the button that should be highlighted. Then set CSS rules in your style sheet for that class or ID.
    Code CSS:
    #nav li {...default button style...}
    #nav li.current {...active button style...}

    If you're using server-side includes you can assign an ID to each button in the nav bar and then set a class on the body element for each page. Then set CSS rules for the combinations, like so:
    Code CSS:
    #nav li {...default button style...}
    body.start #start, body.news #news, ... {...active button style...}
    Birnam wood is come to Dunsinane


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •