How to show the current active link

kimmi_baby · 11-29-2011, 04:24 AM

Hi,

I was wondering how to show the current active link on the navigation?

I also have a few tables that I need to show the active link on as well.

Thanks

Excavator · 11-29-2011, 04:40 AM

Hello kimmi_baby,
Have a look at this example - http://nopeople.com/CSS%20tips/h_ul_...ges/index.html

kimmi_baby · 11-29-2011, 06:55 AM

Thank you for your reply

Now I'm a little bit confused on a few thing...

What if at the moment my CSS looks like this:

Code:

#nav li#nav-home a {
width:101px;
height:20px;
background:url(../images/main%20menu%20tabs/nav_home.png) no-repeat;/* X and Y position at 0 */
}


#nav li#nav-home a:hover {
width:101px;
height:20px;
background:url(../images/main%20menu%20tabs/nav_home.png) no-repeat;
background-position: 0 -20px;

}

Do I need to rewrite all of it for the ID to work?

kimmi_baby · 11-29-2011, 07:11 AM

What if I have more than one stylesheet?

kishanvaja · 11-29-2011, 03:29 PM

I managed this by giving the body an ID (page name such as home, contact-us etc.). Then in my nav I gave the "a href" a class which matched the body ID.

My CSS then looked like this:-

Code:

#home .home, #contact-us .contact-us {
	background-color: #000;
	background-repeat: no-repeat;
	background-position: left top;
}

The only thing you need to change on a page by page basis is the Body ID as all your nav links are classed up. I also run multiple stylesheets and it's no problem.

kishanvaja · 11-29-2011, 03:30 PM

Sorry forgot to include code for the HTML

Code:

<body id=brighton>
... a little bit later...
<ul>
<li><a href="../birmingham/index.html" class="birmingham" accesskey="1" title="">Birmingham</a></li>
<li><a href="../brighton/index.html" class="brighton" accesskey="2" title="">Brighton</a></li>
<li><a href="../bristol/index.html" class="bristol" accesskey="3" title="">Bristol</a></li>

Excavator · 11-29-2011, 04:10 PM

Quote:

Originally Posted by kimmi_baby

Do I need to rewrite all of it for the ID to work?

Each page will need a unique id. That should be the only change needed to your markup for this to work.

The beauty of this is there is no change made to the menu itself from page to page, you target the anchor from body id.
That makes it possible to use an include for your menu, something that you'll really appreciate later!

Excavator · 11-29-2011, 04:11 PM

I whipped out an example for you on your other thread since that's where the link to your page was.