Basic horizontal menu color changing

HTML & CSS
1

Hi, I don’t really know anything about web coding…

With current coding the “Home” menu section is always red. I want the color of the menu section to be red on the menu that people clicked.

I was trying to change the menu color depending on the web page. But I can’t find the way to do it. Please help.

I am attaching the files

/* Let's import the lovely google font, please keep this line at the top of your stylesheet */

@import url(http://fonts.googleapis.com/css?family=Capriola);

/* Menu CSS */

#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a{
	
	padding: 0;
	margin: 0;
	line-height: 1;
	font-family: 'Capriola', sans-serif;
	
}

#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {

	content: '';
	display: table;
	
}


#cssmenu:after, #cssmenu > ul:after {

	clear: both;
	
}

#cssmenu {

	zoom:1;
	height: 69px;
	background: url(images/bottom-bg.png) repeat-x center bottom;
	border-radius: 2px;
	
}

#cssmenu ul{

	background: url(images/nav-bg.png) repeat-x 0px 4px;
	height: 69px;
	
}

#cssmenu ul li{

	float: left;
	list-style: none;
	
}

#cssmenu ul li a{
	
	display: block;
	height: 37px;
	padding: 22px 30px 0;
	margin: 4px 2px 0;
	border-radius: 2px 2px 0 0;
	text-decoration: none;
	font-size: 15px;
	color: white;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .75);
	font-weight: 400;
	opacity: .9;
	
}

#cssmenu ul li:first-child a{
	
	margin: 4px 2px 0 0;
	
}

#cssmenu ul li a:hover, #cssmenu ul li.active a{
	
	background: url(images/color.png) center bottom;
	display: block;
	height: 37px;
	margin-top: 0px;
	padding-top: 26px;
	color: #600000;
	text-shadow: 0 1px 1px rgba(255, 255, 255, .35);
	opacity: 1;
	
}
2

[FONT=Verdana]Hi successfulfail,

I’ve added your CSS to your post, because a lot of folk are not comfortable downloading zip files. You’ll get more help if you put the code in your post. :slight_smile: It’s also a good idea to post your HTML, too, as it’s pretty hard to work out what’s happening without the full picture.

If I’ve understood your question correctly, you want the link for the current page to be styled differently to the other links. Your CSS already has this:

#cssmenu ul li a:hover, #cssmenu ul li.active a{

	background: url(images/color.png) center bottom;
	display: block;
	height: 37px;
	margin-top: 0px;
	padding-top: 26px;
	color: #600000;
	text-shadow: 0 1px 1px rgba(255, 255, 255, .35);
	opacity: 1;

}

To use it on your site, you need to add class=“active” to the relevant list item for each page. For example, your home page menu would be:

<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="stuff.html">Other Stuff</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>

and your “About Us” menu:

<ul>
<li><a href="index.html">Home</a></li>
<li class="active"><a href="about.html">About Us</a></li>
<li><a href="stuff.html">Other Stuff</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>

Does that make sense?[/FONT]

3

[font=verdana]The other way to style the link to the current page – if you aren’t able to put a class/ID on the relevant <li>, maybe because you’re including the menu so can’t change it page-by-page – is to use ‘matching pairs’.

To do this, you give each <li> a different class name, and then you put the matching name as an ID on the body tag.

So, for example, the menu would be

<ul>
<li class="home"><a href="index.html">Home</a></li>
<li class="about"><a href="about.html">About Us</a></li>
<li class="other"><a href="stuff.html">Other Stuff</a></li>
<li class="contact"><a href="contact.html">Contact Us</a></li>
</ul>

and then on the Contact Us page, you would have

<body id="contact">

You then see the CSS with the matching pairs, like this:

#home .home,
#about .about,
#other .other,
#contact .contact {
background: url(images/color.png) center bottom;
etc...}

[/font]

4

I would go with Stevie D’s method, but if it’s a bit overwhelming, there is another option that’s not as good but easier to implement. It uses jQuery:

5

Or here is a third one (#3) plus the other two as well. http://www.visibilityinherit.com/code/current-page.php