PHP include for navigation, with selected / highlighting of current page

Revision: 34049

at October 16, 2010 08:55 by stephcode

Updated Code

Folder structure:
[images]
[includes]: header.php
[styles]: global.css
index.php
about.php


index.php:

<?php
	//Set values for page
	$page_title = "Home | PHP Include Demo";
	$current_page = "home";
	
	//Load header
	include_once('./includes/header.php'); 
?>
		
		<div id="content">
		
			<h1>Welcome</h1>
			
			<p>What a wonderfully constructed sentence!</p>
		
		</div>
		
<?php include_once('./includes/footer.php'); ?>

about.php:

<?php
	//Set values for page
	$page_title = "About | PHP Include Demo";
	$current_page = "about";
	
	//Load header
	include_once('./includes/header.php'); 
?>
		
		<div id="content">
		
			<h1>About Us</h1>
			
			<p>This is the second page. Filled with important words.</p>
		
		</div>
		
<?php include_once('./includes/footer.php'); ?>

global.css (snippet):

			/* Individual Items */
			#navigation li.home{}
				#navigation li.home a{background-position:0px 0px;}
				#navigation li.home a:hover{background-position:0px -120px;}
				#navigation li.home a.selected {background-position:0px -240px;}
			
			#navigation li.about{}
				#navigation li.about a{background-position: -130px 0px;}
				#navigation li.about a:hover{background-position: -130px -120px;}
				#navigation li.about a.selected {background-position: -130px -240px;}
				
			#navigation li.services{}
				#navigation li.services a{background-position: -270px 0px;}
				#navigation li.services a:hover{background-position: -270px -120px;}
				#navigation li.services a.selected {background-position: -270px -240px;}
				
			#navigation li.contact{}
				#navigation li.contact a{background-position: -420px 0px;}
				#navigation li.contact a:hover{background-position:-420px -120px;}
				#navigation li.contact a.selected {background-position:-420px -240px;}

header.php:

<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title><?php echo $page_title; ?></title>
	
	<link rel="stylesheet" href="styles/reset.css" type="text/css" />
	<link rel="stylesheet" href="styles/global.css" type="text/css" />
	
</head>

<body>

	<div id="wrapper">
		
		<div id="header">
			<ul id="navigation">
				<li class="home"><a <?php if ($current_page == "home") { ?>class="selected"<?php } ?> href="index.php">Home</a></li>
				<li class="about"><a <?php if ($current_page == "about") { ?>class="selected"<?php } ?> href="about.php">About</a></li>
				<li class="services"><a <?php if ($current_page == "services") { ?>class="selected"<?php } ?> href="#">Services</a></li>
				<li class="contact"><a <?php if ($current_page == "contact") { ?>class="selected"<?php } ?> href="#">Contact</a></li>
			</ul>
		</div>

Revision: 34048

at October 16, 2010 08:53 by stephcode

Initial Code

index.php:

<?php
	//Set values for page
	$page_title = "Home | PHP Include Demo";
	$current_page = "home";
	
	//Load header
	include_once('./includes/header.php'); 
?>
		
		<div id="content">
		
			<h1>Welcome</h1>
			
			<p>What a wonderfully constructed sentence!</p>
		
		</div>
		
<?php include_once('./includes/footer.php'); ?>

about.php:

<?php
	//Set values for page
	$page_title = "About | PHP Include Demo";
	$current_page = "about";
	
	//Load header
	include_once('./includes/header.php'); 
?>
		
		<div id="content">
		
			<h1>About Us</h1>
			
			<p>This is the second page. Filled with important words.</p>
		
		</div>
		
<?php include_once('./includes/footer.php'); ?>

global.css (snippet):

			/* Individual Items */
			#navigation li.home{}
				#navigation li.home a{background-position:0px 0px;}
				#navigation li.home a:hover{background-position:0px -120px;}
				#navigation li.home a.selected {background-position:0px -240px;}
			
			#navigation li.about{}
				#navigation li.about a{background-position: -130px 0px;}
				#navigation li.about a:hover{background-position: -130px -120px;}
				#navigation li.about a.selected {background-position: -130px -240px;}
				
			#navigation li.services{}
				#navigation li.services a{background-position: -270px 0px;}
				#navigation li.services a:hover{background-position: -270px -120px;}
				#navigation li.services a.selected {background-position: -270px -240px;}
				
			#navigation li.contact{}
				#navigation li.contact a{background-position: -420px 0px;}
				#navigation li.contact a:hover{background-position:-420px -120px;}
				#navigation li.contact a.selected {background-position:-420px -240px;}

header.php:

<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title><?php echo $page_title; ?></title>
	
	<link rel="stylesheet" href="styles/reset.css" type="text/css" />
	<link rel="stylesheet" href="styles/global.css" type="text/css" />
	
</head>

<body>

	<div id="wrapper">
		
		<div id="header">
			<ul id="navigation">
				<li class="home"><a <?php if ($current_page == "home") { ?>class="selected"<?php } ?> href="index.php">Home</a></li>
				<li class="about"><a <?php if ($current_page == "about") { ?>class="selected"<?php } ?> href="about.php">About</a></li>
				<li class="services"><a <?php if ($current_page == "services") { ?>class="selected"<?php } ?> href="#">Services</a></li>
				<li class="contact"><a <?php if ($current_page == "contact") { ?>class="selected"<?php } ?> href="#">Contact</a></li>
			</ul>
		</div>

Initial URL

http://buildinternet.com/2009/12/using-the-php-include-function-to-template-faster/

Initial Description

Initial Title

PHP include for navigation, with selected / highlighting of current page

Initial Tags

page

Initial Language

PHP

Choose a language for easy browsing: