[Ben]

Article creator: Sebastian Sulinski

This tutorial will explain you how to make your button (link) in the navigation active when you are on a specific page.

Let's begin with the layout. Create five pages:

• index.php
  
• about_us.php
  
• services.php
  
• testimonials.php
  
• contact_us.php

Copy and paste the following structure in all of them - I'm just creating navigation for our pages because that's the only thing which we will need here:

<div id="nav">
<ul id="mainnav">
<li><a href="index.php" title="Welcome page">Welcome</a></li>
<li><a href="about_us.php" title="About us page">About us</a></li>
<li><a href="services.php" title="Services page">Services</a></li>
<li><a href="testimonials.php" title="Testimonials page">Testimonials</a></li>
<li><a href="contact_us.php" title="Contact us page">Contact us</a></li>
</ul>
</div>

Now let's attach the stylesheet:

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	margin: 0px;
	padding:20px 0px;
	text-align: center;
}
#nav {
	padding: 0px;
	width: 515px;
	margin:0px auto;
}
#mainnav {
	margin: 0px;
	padding: 0px;
	list-style-image: none;
	list-style-type: none;
}
#mainnav li {
	padding: 0px;
	float: left;
	margin:0px 3px 0px 0px;
}
#mainnav li a:link, #mainnav li a:visited, #mainnav li a:active {
	color: #333;
	text-decoration: none;
	margin: 0px;
	display: block;
	float: left;
	border-bottom:solid 5px #dadada;
	padding: 0px;
	width: 100px;
	height: 20px;
	text-align: center;
}
#mainnav li a:hover {
	text-decoration: none;
	border-bottom:solid 5px #333;
}
#mainnav li a.active:link, #mainnav li a.active:visited, #mainnav li a.active:active, #mainnav li a.active:hover {
	text-decoration: none;
	border-bottom:solid 5px #990000;
}

Stylesheet simply formats our navigation giving it the bottom border of 5px.
Also on hover the border changes colour and when the button (link) is active we are applying a class="active".

Prietty straight forward.

Now at the top of each page, before any html or DOCTYPE definitions type the following:

<?php $page = basename($_SERVER['SCRIPT_NAME']); ?>

This piece of php code will retrieve the name of the currently viewed page (i.e. index.php) and assing it to the $page variable.

In the navigation, after title in the index.php link add the following:

<?php if ($page == 'index.php') { ?>class="active"<?php } ?>

Do the same for each link in the navigation replacing the 'index.php' with the name of the page it links to. Your code should now look like this:

<div id="nav">
<ul id="mainnav">
<li><a href="index.php" title="Welcome page" <?php if ($page == 'index.php') { ?>class="active"<?php } ?>>Welcome</a></li>
<li><a href="about_us.php" title="About us page" <?php if ($page == 'about_us.php') { ?>class="active"<?php } ?>>About us</a></li>
<li><a href="services.php" title="Services page" <?php if ($page == 'services.php') { ?>class="active"<?php } ?>>Services</a></li>
<li><a href="testimonials.php" title="Testimonials page" <?php if ($page == 'testimonials.php') { ?>class="active"<?php } ?>>Testimonials</a></li>
<li><a href="contact_us.php" title="Contact us page" <?php if ($page == 'contact_us.php') { ?>class="active"<?php } ?>>Contact us</a></li>
</ul>
</div>

What this code does is it checks if variable $page is the same as the name of the link and if so it applyes class="active" to it what changes the look of the link indicating that it's the one related to the currently viewed page.

I've used same method (with additional formatting) in one of my other sites - which is still under development - css for designers.
I hope it's clear enough - any questions - get in touch.

Take care,

[Designer Karly]

Thanks Sebastian. What a very interesting tutorial, i'v been reading through the code and it all makes sense, so I will give it a go tonight after dinner. It will be great to implement it for a website i'm currently working on.

DK.

[BenG]

cool tutorial mate, well explained

[Brandon]

Nice job on the tutorial, you did a good job of explaining it - thanks.

[php_penguin]

just a crazy idea here, but surely if the pages are PHP, you could link to it with sometihng like load.php?page=index
or load.php?page=about_us

Then, include the file (after making sure it is in this domain and it exists etc) and do a str_replace for <a href="PAGENAME", replacing with <a href="PAGENAME" class="active".

Just another way to do it I suppose, but with less code actually in the page.