5 replies to this topic

[waggette]

Hi All!

Thank you in advance for any help provided to a newbie with CSS.

Goal: Display an active link differently on the nav menu when that page is loaded (e.g. my nav menu offers: services, samples, etc and I want to the services link to be displayed differently when the visitor is on the services page)

What I have Done: Everything that seems obvious to a newbie to CSS. I have successfully figured out how to create multiple link styles with various hover looks, etc with CSS but this last component is all I need to finish up my nav menu. I've also learned that the "active" pseudo-class is a poorly named pseudo-class as it's only related to active clicking on not truly the active page. I'm very determined to figure it out so that in the future, I'm not creating any extra work for myself when there are any updates I need to make to my nav menu. I have also scoured the internet for solutions but have not really been able to replicate any suggestions made to others with the same type of issue. As an additional note, I have not code to share from my CSS associated with any attempts because everything has failed.

Help Desired: Any help would be appreciated: pointing me in the direction of a good tutorial for beginners, providing a quick set of directions to accomplish the task...any help please would be very appreciated. And, if this help could be clear for those learning the language associated with CSS would be helpful.

Thanks so much!

[Ghost]

There is no pure css code to style a link depending on the page you're viewing.

Have you got the css for your navigation?

Take the following code for example...

<a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a>

Then, for css:

a:link,
a:active,
a:visited,
a:hover{
color:#000;
}
a.active{
color:#CCC;
font-weight: bold;
}

Very basic code... but, you'll notice I have a class for the link called active.

BASICALLY, you have to use the active class (not the pseudo active, but class='active'), then you have to edit the page file like:

<a href="#">Link 1</a><a class='active' href="#">Link 2</a><a href="#">Link 3</a>

There are alternate ways, if you're using PHP, by giving the page a name and then using an if statement to determine what page is being viewed... the first method I showed should be good for someone at your level though..

[waggette]

Thank you for your response. I imagine I am trying to do something a bit more challenging for my knowledge level as I was trying to create a header component that included my top nav menu so that a single update to my header and/or nav menu will update all the corresponding pages. Thus, while your method works well for "coding" each page independently it doesn't work with what I'm trying to attempt. I guess I'm determined to figure out the alternate method that I imagine may need to include "if" like statements. If for some reason it is "above" my capabilities, I will settle with the method you provided (crossing my figures it's not "above" my capabilities with proper guidance ). Additionally, what I'm wanting to happen when the link is active is to maintain the same color as the "a:link" and "a:visited" but have a small icon above it to denote the active link.

Here is my CSS for my top navigation style(I have a different style for my lower navigation):

.topmenu a:link, a:visited {
	color: #4dbff7;
	font-size: 12px;
	font-family: verdana;
	font-weight: bold;
	line-height: 13px;
	text-decoration: none;
}

.topmenu a:hover {
	color: #79ed58;
	font-size: 12px;
	font-family: verdana;
	font-weight: 700;
	line-height: 13px;
}

Overall, my site will be a very simple design and it's all coded except for this one little piece. Thank you again for any help!!!

Edited by rc69, 19 September 2007 - 09:27 PM.

[Jacorre]

If you'd more examples of navigation using CSS, check out this site. It has a number of navigation examples using lists. Not sure if it will help with your question but it may help with styling your navigation.

[.CJ]

Source: Sitepoint.com

Quote

Most Websites highlight the navigation item relating to each user's location within the Website, to help users orientate themselves. This is a fundamental requirement for basic usability, but it can be a pain: we need to tweak the HTML code behind the navigation for each and every page. Can we have the best of both worlds? Is it possible to have the navigation highlighted on every page, without having to tweak the HTML code on every page? Of course it is!

First of all, you'll need to assign a class to each navigation item:

<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="contact">Contact us</a></li>
</ul>

You'll then need to insert an id into the <body> tag. The id should be representative of where users are located in the site, and should change when users move to a different site section. When on the 'Home' page, it should read <body id="home">, in 'About Us', it should read <body id="about">, and in 'Contact Us', <body id="contact">.

Next, you create a new CSS rule:

#home .home, #about .about, #about .about, #contact .contact
{
commands for highlighted navigation go here
}

This basically creates a rule that only takes effect when class="home" is contained within id="home", and when class="about" is in id="about" and class="contact" is in id="contact". These situations will only occur when the user is in the appropriate section of the site, seamlessly creating our highlighted navigation item.

[waggette]

Thanks everyone for your input! I'm at my day job right now and am anxious to try your input when I get home this evening.

Jacorre: The link you provided will be added as a favorite for future reference as well and I'll see what I can use for my design attempt.

This is the first site I'm putting together and this little task is proving to be a pesty nag for me since I'm just learning about creating lists, etc.

I'll let you know if my ignorance at web design is still preventing me from accomplishing this nav feature after this evening. Thanks again!