View Full Version : Making navigation bar have an active state

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:


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


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


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.

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

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

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

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