Basic horizontal menu color changing

**successfulfail** · Oct 7, 2012 01:29

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

CSS Menu Upload.zip nav-bg.png color.png bottom-bg.png

Code CSS:

/* Let's import the lovely google font, please keep this line at the top of your stylesheet */
 
@import url([url]http://fonts.googleapis.com/css?family=Capriola);[/url]
 
/* 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;
 
}

**TechnoBear** · Oct 7, 2012 10:07

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.

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:

Code CSS:

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

Code HTML4Strict:

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

Code HTML4Strict:

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

**Stevie D** · Oct 7, 2012 10:43

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

HTML Code:

<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

HTML Code:

<body id="contact">

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

Code css:

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

**ralph.m** · Oct 7, 2012 17:39

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:

http://css-tricks.com/snippets/jquer...-current-page/

**PicnicTutorials** · Oct 8, 2012 23:53

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

User Tag List

Thread: Basic horizontal menu color changing

Thread Tools

Display

Basic horizontal menu color changing

Bookmarks

Bookmarks

Posting Permissions