Nav Active State Button

  • # July 1, 2009 at 9:02 pm

    Hello,

    I’ll make this as quickly as possible. I am basically tryuing to get each of my Nav button to be on down state when the user go to each individual page. My hover works, but as soon as I put in the active state obviously all the Nav button gets active. The site is not live as of this time but I have provided the code below.

    Thanks Guys

    Code:
    #nav{
    float : left;
    width : 895px;
    margin-top : 0px;
    margin-left : 0px;
    background-color: #fff;
    }
    #homeBTN {
    float : left;
    width : 175px;
    height : 50px;
    text-indent : -9999px;
    overflow : hidden;
    display : block;
    background : transparent url(images/home.jpg) no-repeat 0 0;
    }

    #homeBTN:hover {
    background-position : bottom left;
    }

    #homeBTN:active {
    background-position: bottom left;
    }

    #homeBTN:focus {
    background-position : bottom left;
    }

    # July 2, 2009 at 2:44 am

    This reply has been reported for inappropriate content.

    link please to see what you mean, it may not be live, but you should have it on the net to test at times

    and welcome

    # July 2, 2009 at 12:09 pm

    Here is the site ikthius

    http://eclipxeconsulting.com/

    # July 2, 2009 at 12:34 pm

    Just give each page body its own unique id.
    eg.

    Code:

    Then set the rule in your css for the corresponding nav button on each page:

    Code:
    body#home #homeBTN {
    background-position:left bottom;
    }

    body#about #abouBTN {
    background-position:left bottom;
    }

    etc.

    # July 2, 2009 at 9:01 pm

    Thanks apostrophe. Works like a Charm! Something so simply yet so daunting. :)

    # July 2, 2009 at 10:12 pm

    sorry about that apostrophe. I jump the gun on this one. I tried your solution but I was getting the same issue. After scratching my head for a few minutes, I came up with a solution which Worked. I basically Gave each nav button a class name for each individual page and then just apply my css function to get my down state button
    See code below:

    Code:
    #nav{
    float : left;
    width : 895px;
    margin-top : 0px;
    margin-left : 0px;
    background-color: #fff;
    }
    #homeBTN {
    float : left;
    width : 175px;
    height : 50px;
    text-indent : -9999px;
    overflow : hidden;
    display : block;
    background : transparent url(images/home.jpg) no-repeat 0 0;
    }

    #homeBTN:hover {
    background-position : bottom left;
    }

    #homeBTN:active {
    background-position : bottom left;
    }

    #nav .home {
    background-position: bottom left;
    }

    #aboutBTN {
    float : left;
    width : 202px;
    height : 50px;
    text-indent : -9999px;
    overflow : hidden;
    display : block;
    background : transparent url(images/about.jpg) no-repeat 0 0;
    }
    #aboutBTN:hover {
    background-position : bottom left;
    }

    #aboutBTN:active {
    background-position : bottom left;
    }

    #nav .about {
    background-position: bottom left;
    }

    this is the website again: http://eclipxeconsulting.com/index.html

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed