PDA

View Full Version : Making navigation bar have an active state



j05hr
Mar 3rd, 2010, 01:36 PM
How could I make this image have an active state? The active state will be the same as the rollover.

http://img442.imageshack.us/img442/5581/navne.png (http://img442.imageshack.us/i/navne.png/)

I made


#navigation li.active a:active {
background: url(images/nav1.png) no-repeat 0 -56px;
}

Thinking that is all I would need to do but that didn't work. This is for the index page, obviously the original would be <li class="index"> originally.

This is my code for it:


HTML


<ul>
<li class="active"><a href="index.html">Home</a></li>
<li class="about"><a href="about.html">About</a></li>
<li class="portfolio"><a href="portfolio.html">Portfolio</a></li>
<li class="contact"><a href="contact.php">Contact</a></li>
</ul>


CSS


#navigation ul {
height: 56px;
position: relative;
background: url(images/nav1.png) no-repeat 0 0;
list-style: none;
margin-left: 389px;
margin-top: 55px;
}
#navigation li {
display: inline;
}
#navigation li a:link, #navigation li a:visited {
border: none;
width: 106px;
height: 56px;
display: block;
position: absolute;
text-indent: -7000px;
outline: none;
}
#navigation li.home a:link, #navigation li.home a:visited {
left: 0;
}
#navigation li.about a:link, #navigation li.about a:visited {
left: 100px
}
#navigation li.portfolio a:link, #navigation li.portfolio a:visited {
left: 207px
}
#navigation li.contact a:link, #navigation li.contact a:visited {
left: 315px
}
#navigation li.home a:hover {
background: url(images/nav1.png) no-repeat 0 -56px;
}
#navigation li.about a:hover {
background: url(images/nav1.png) no-repeat -100px -56px;
}
#navigation li.portfolio a:hover {
background: url(images/nav1.png) no-repeat -207px -56px;
}
#navigation li.contact a:hover {
background: url(images/nav1.png) no-repeat -315px -56px;
}

#navigation li.active a:active {
background: url(images/nav1.png) no-repeat 0 -56px;
}


Thanks,
Josh

VIPStephan
Mar 3rd, 2010, 01:45 PM
The :active pseudo class only applies to links that are in the state of being clicked, i. e. as long as the mouse button is down. Remove that pseudo class from the CSS rule and see what happens.

j05hr
Mar 3rd, 2010, 02:04 PM
Do you mean this?


#navigation li.active a: {
background: url(images/nav1.png) no-repeat 0 -56px;
}

abduraooft
Mar 3rd, 2010, 02:29 PM
That colon (:) is the part of pseudo class.

Excavator
Mar 3rd, 2010, 05:08 PM
Hell jo5hr,

CSS :active pseudo-class (http://www.w3schools.com/Css/pr_pseudo_active.asp) Definition and Usage
The :active pseudo-class adds a style to an element that is activated.

It's only active while the mouse is clicking on it though.
a:focus (http://www.w3schools.com/CSS/pr_pseudo_focus.asp) will last longer, it will stay in your rolled over state till the mouse clicked somewhere else.

Here is a pretty simple way of indicating what page your viewer is on - http://nopeople.com/CSS/h_ul_menu-with_images/index.html