PDA

View Full Version : Active Navigation with php includes


urbanrays
11-04-2010, 03:36 PM
When creating pages with php includes I have kept my navigation in header.php, all well and good till I want to make each page active when I am on it, currently when I browse all that is active is my home page.

<li><a href="index.php" class="active">HOME</a></li>
<li><a href="about.php">ABOUT</a></li>

Is there a simple fix for this, or is it a pain in the arse

Ricky55
11-04-2010, 05:40 PM
You can do this with PHP or CSS. With CSS by giving each page a unique ID on the body tag and then using a group selector to target each body tag or with the following PHP. (They may be a better way of doing this with PHP, I'm still learning myself but this does work)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">

ul li {
float: left;
list-style-type: none;
margin-left: 30px;
background: red;
}

ul li a#active {
background: teal;
}

</style>

</head>

<body>
<?php $currentPage = basename($_SERVER['SCRIPT_NAME']); ?>
<ul>
<li><a href="hello.php" <?php if ($currentPage == 'hello.php') {echo 'id="active"';} ?>>Hello</a></li>
<li><a href="apples.php" <?php if ($currentPage == 'apples.php') {echo 'id="active"';} ?>>Apples</a></li>
<li><a href="oranges.php" <?php if ($currentPage == 'oranges.php') {echo 'id="active"';} ?>>Oranges</a></li>
<li><a href="bread.php" <?php if ($currentPage == 'bread.php') {echo 'id="active"';} ?>>Bread</a></li>
</ul>
</body>
</html>

davidj
11-04-2010, 05:49 PM
you could do this using a switch

you have to detect the page name using PHP and pass this into the switch. Use case statements to set the active class.

$page = $_SERVER['PHP_SELF'];

switch($page){

case 'page1': $active1 = "active"; break;
case 'page2': $active2 = "active"; break;
case 'page3': $active3 = "active"; break;

}

you can use the $active variable in each <a tag to set the active class

Corrosive
11-04-2010, 06:22 PM
Have moved post for neatness :)

urbanrays
11-04-2010, 06:39 PM
Cheers

Got it thanks, used your way Ricky cheers,

Can I just ask one more question about includes, did a quick test on w3c validator a minute ago and this is what I got back, never seen it before and was wondering if this has anything to do with the includes

1-No Character Encoding Found! Falling back to windows-1252.
2-No Character encoding declared at document level

davidj
11-04-2010, 08:34 PM
No problem

both mine and Ricky's solution will work

mine will need less maintenance however

Ricky55
11-04-2010, 08:43 PM
I'll make a note of your solution DJ, it is slicker than mine.

gentleone
11-04-2010, 09:37 PM
Can I just ask one more question about includes, did a quick test on w3c validator a minute ago and this is what I got back, never seen it before and was wondering if this has anything to do with the includes

1-No Character Encoding Found! Falling back to windows-1252.
2-No Character encoding declared at document level

What's your Doctype and which charset do you have applied in the meta? With XHTML you'll have to define the character encoding in the HTTP header as well.

urbanrays
11-05-2010, 10:55 AM
What's your Doctype and which charset do you have applied in the meta? With XHTML you'll have to define the character encoding in the HTTP header as well.

Here you go, I am just using what DW generates

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Thanks

gentleone
11-05-2010, 11:26 AM
Add this on every page above your doctype and it validate as UTF-8

<?php header('Content-Type:text/html; charset=UTF-8'); ?>