How to highlight the current page Nav link ?

[Oak]

I want the the Nav link of the page that is showing to be defined.

Please provide link, proper search term to tutorial or code

Thanks again!!

[Jack Franklin]

Ok. You need to give the link which is active an id. Presuming you have used an unordered list, it would be:

Code: Select all

<ul>
<li><a href="#">Link</a>
<li id="active"><a href="#">Link</a>
</ul>

And then the CSS

Code: Select all

li #active {
...
}

HTH. Jack

[Oak]

so when someone is on a page of me website the page link will indicate that it is active, yes.

Do I have to add the id
<li id="active"><a href="#">mywebpage</a>

to each link?


<ul>
<li><a href="/">Welcome</a></li>
<li><a href="#" rel="dropmenu1">Classes</a></li>
<li><a href="capoeira-school-contact.php">Contact</a></li>
<li><a href="capoeira-school-images.php">Images</a></li>
<li><a href="capoeira-school-links.php">Links</a></li>
<li><a href="capoeira-events-up-coming.php">Events</a></li>
<li><a href="#" rel="dropmenu2">Capoeira FAQs</a></li>
<li class="end"><a href="capoeira-school-risadinha.php">The Teacher</a></li>
</ul>

[Jack Franklin]

You have to do it manually, yes.

[Oak]

The nav bar is not liking this.

example

<ul>
<li><a href="capoeira-school-links.php">Links</a></li>
<li id="active"><a href="#">Link</a>
</ul>

so I tried this !?

<li id="active"><a href="capoeira-school-links.php">Links</a></li>

This seems to do the job, though the back ground colour that I chose does not fill the nav tab.

[Jack Franklin]

You say that this code is not working?

Code: Select all

<ul>
<li><a href="capoeira-school-links.php">Links</a></li>
<li id="active"><a href="#">Link</a>
</ul>

You've missed out a </li>!

Code: Select all

<ul>
<li><a href="capoeira-school-links.php">Links</a></li>
<li id="active"><a href="#">Link</a></li>
</ul>

[Oak]

hmm.. this produces two link nav tabs?

[MikeHopley]

Originally Posted by jackfranklin

You have to do it manually, yes.

Not necessarily.

You can use PHP or javascript to match the link HREF with the page URL, and apply a class (or remove the link entirely).

[Bravo81]

hmm.. this produces two link nav tabs?

Yes, that code creates two nav tabs as it has two <li>'s

PHP: Select all

<ul>
<li><a href="capoeira-school-links.php">Links</a></li>
<li id="active"><a href="#">Link</a></li>
</ul> 

You can make a simple PHP script to detect which link is active and make the id="active"

For the colour not taking up the whole space, screenshot please?

~Dean

[Oak]

You can make a simple PHP script to detect which link is active and make the id="active"

You might be able to make a simple PHP script by I am not! link to tutorial?

For the colour not taking up the whole space, screenshot please?

I don't think this code will work the color still appears when the page isn't active.

I would like to know how take a screen shot!

Cheers

[Bravo81]

I would like to know how take a screen shot!

Are you serious? :O

Ok, theres a Print Screen button on your keyboard, find it, push it.

Then open an image program (Paint usualy)
Push Ctrl+V (Paste) and your screenshot will appear.

Save it, then upload it to a free image host (www.imageshack.us ) or google one.

As for a Tut, im not sure..someone else will have to help you on that bit.

~Dean

[Oak]

Ok, ok!

should be a screen shot attached

but as I said not sure about the code.