Simple CSS Menu Question - Adding an active state?

HTML & CSS
1

Hey folks,

I would like to make it so when a visitor clicks on when of menu items and goes to another page in my site that menu item then changes bg colour to highlight the fact that they are on that page. Now I’ve tried using a:active but it doesn’t seem to work, perhaps I’m doing it wrong?

Here’s my code:


<div id ="menuContainer">
<ul>
  <li><a href="menu2.html">Electronics Store</a>
    <ul>
      <li><a href="#">Digital Cameras</a>
        <ul>
          <li><a href="#">FujiFilm</a></li>
          <li><a href="#">GE</a></li>
          <li><a href="#">Accessories</a></li>
        </ul>
      </li>
      <li><a href="#">GPS</a>

      </li>
    </ul>
  </li>
  <li><a href="#">Toy Store</a>
    <ul>
		  <li><a href="#">Gaming</a></li>
		  <li><a href="#">USB Gadgets</a></li>
    </ul>
  </li>
	<li><a href="#">Office Store</a>
	  <ul>
	    <li><a href="#">Keyboards</a></li>
	    <li><a href="#">Mice</a></li>
	
		</ul>
  </li>
</ul>

</div>

CSS:




/*This style will be applied to the div element holding the menu*/
body {
	margin: 0;
	padding: 5px;
}

#menuContainer {
  background-color: white;
  width: 10em;
  padding: 5px;
}

/* Link styles*/

#menuContainer a {
  text-decoration: none;
  color: #2292d2;
  font-family:arial,helvetica,sans-serifl;
font-size:13px;
font-weight:bold;
padding: 15px;

}

#menuContainer a:hover {
  color: #FF6633;
}

/* Hide bullets in unordered list*/
#menuContainer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* Set li styles*/

#menuContainer li {
  background-color: #f0f4f8;
  border: 1px solid #c4c1bc;
  width: 10em;
   padding:4px;
  /* this is to make the submenus position relative to this li */
  position: relative;
}

/* Mouseover li style*/
#menuContainer li:hover {
  border: 1px solid #c4c1bc;
  background-color: #f8f7f5;
}

/*Initially hide second level (or higher) pop-up*/
#menuContainer ul ul {
  position: absolute;
  left: 10.5em;
  top: 1em;
  visibility: hidden;

}

/*Mouseover: display second level (or higher) pop-up*/
#menuContainer li:hover > ul {
  visibility: visible;
}

So what would I need to add to be able to achieve this?

Many thanks :smiley:

2

The :active pseudo class means “while the mouse is pressed” and has nothing to do with whether the link points to the current page or not.

Two ways to do this - you can manually add a “current” class to the relevant menu item on each page, and style that, or give each menu item a unique class (or id - I usually use class as it looks neater in the css) and give each page’s body element a unique id - then the highlighted menu item can be targeted by combining the appropriate id and class names.

3

I wrote a nice tut explaining three ways to do what you want.
http://www.visibilityinherit.com/code/current-page.php

4

Here’s how you do it, most simply with a class. Like Centauri mentioned, the :active pseudo class has nothing to do with it.

I’ve set up a test example for you:


/*This style will be applied to the div element holding the menu*/
body {
	margin: 0;
	padding: 5px;
}

#menuContainer {
  background-color: white;
  width: 10em;
  padding: 5px;
}

/* Link styles*/

#menuContainer a {
  text-decoration: none;
  color: #2292d2;
  font-family:arial,helvetica,sans-serifl;
font-size:13px;
font-weight:bold;
padding: 15px;

}

#menuContainer a:hover {
  color: #FF6633;
}

/* Hide bullets in unordered list*/
#menuContainer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}


/* Set li styles*/

#menuContainer li {
  background-color: #f0f4f8;
  border: 1px solid #c4c1bc;
  width: 10em;
   padding:4px;
  /* this is to make the submenus position relative to this li */
  position: relative;
}

#menuContainer li.current {background-color:#FF0000;} /* ADD THIS */

/* Mouseover li style*/
#menuContainer li:hover {
  border: 1px solid #c4c1bc;
  background-color: #f8f7f5;
}

/*Initially hide second level (or higher) pop-up*/
#menuContainer ul ul {
  position: absolute;
  left: 10.5em;
  top: 1em;
  visibility: hidden;

}

/*Mouseover: display second level (or higher) pop-up*/
#menuContainer li:hover > ul {
  visibility: visible;
}



<div id ="menuContainer">
<ul>
<li class="current"><a href="menu2.html">Electronics Store</a> <!--ADD THE "CURRENT" CLASS-->
    <ul>
      <li><a href="#">Digital Cameras</a>
        <ul>
          <li><a href="#">FujiFilm</a></li>
          <li><a href="#">GE</a></li>
          <li><a href="#">Accessories</a></li>
        </ul>
      </li>
      <li><a href="#">GPS</a>      </li>
    </ul>
  </li>
  <li><a href="#">Toy Store</a>
    <ul>
		  <li><a href="#">Gaming</a></li>
		  <li><a href="#">USB Gadgets</a></li>
    </ul>
  </li>
	<li><a href="#">Office Store</a>
	  <ul>
	    <li><a href="#">Keyboards</a></li>
	    <li><a href="#">Mice</a></li>
	
		</ul>
  </li>
</ul>

</div>

Hope this helps

5