Nav Active State Button

[deerby]

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:

Home
About
Products and Services
Contact

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;
}

[deerby]

Here is the site ikthius

http://eclipxeconsulting.com/

[apostrophe]

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.

[deerby]

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

[deerby]

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:

Home
About
Products and Services
Contact

Code:

Home
About
Products and Services
Contact

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

[Author]

Posts