Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by James Ingmire
James Ingmire
11,901 Points

How to highlight the current page's menu link so the user know's what page they are on?

Hello, and thank's in advance. I'am trying to work out how to keep the 'navigation text' or 'anchor tag' highlighted when viewing the current page once clicked.

I just want to use css, no jquery etc, at the moment however i'am using

<?php include('include/header.php'); ?>

php's 'include' funtion on my pages so not sure how much this effect it to continue..bit confused.

Also if anyone else know how to link back to another page with an id so say the div had an id normally you would use 

<li><a class="me" href="#open_times">Opening Times</a></li>

and that would take you to the point in the page where the id="open_times", however if i want to get there from another page, how do i do this? Again i'am using the php include function for the header and footer, not sure if this would effect it.

Thanks all v.much. Please help!

2 Answers

stoyantodorov
stoyantodorov
7,666 Points
stoyantodorov
stoyantodorov
7,666 Points

Let's say your navigation in header.php looks like the following:

<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About me</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>

You can change these to:

<ul>
<li <?php if($current == 'home') {echo 'class="current"';} ?>><a href="index.php">Home</a></li>
<li <?php if($current == 'about') {echo 'class="current"';} ?>><a href="about.php">About me</a></li>
<li <?php if($current == 'contact'){echo 'class="current"';} ?>><a href="contact.php">Contact</a></li>
</ul>

Then in index.php you set $current = 'home'; in about.php you set $current = 'about'; in contact.php you set $current = 'contact'; ( put these before the include('header.php');)

Finally you define a class called 'current' in your css and style it.

For your second question. You can link to another page's ID like this.

<li><a class="me" href="other_page.php#open_times">Opening Times</a></li>

or

<li><a class="me" href="http://externalsite.com/other_page.php#open_times">Opening Times</a></li>

I hope everything is clear. If not - ask.

James Ingmire
James Ingmire
11,901 Points

Worked out great by the way, if you want to re-post this comment as an answer do, then i will mark it 'best answer' if you wish.

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

Ahha, yes of course, I remember now! Makes sense, thanks for that, perfect! Will go try this out and let you know if i fail! lol

Thanks again!!