Grow your CSS skills. Land your dream job.

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

    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.

*May or may not contain any actual "CSS" or "Tricks".