Advanced Search

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

/ Published in: PHP
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. Folder structure:
  2. [images]
  3. [includes]: header.php
  4. [styles]: global.css
  5. index.php
  6. about.php
  7.  
  8.  
  9. index.php:
  10.  
  11. <?php
  12. 	//Set values for page
  13. 	$page_title = "Home | PHP Include Demo";
  14. 	$current_page = "home";
  15.  
  16. 	//Load header
  17. 	include_once('./includes/header.php'); 
  18. ?>
  19.  
  20. 		<div id="content">
  21.  
  22. 			<h1>Welcome</h1>
  23.  
  24. 			<p>What a wonderfully constructed sentence!</p>
  25.  
  26. 		</div>
  27.  
  28. <?php include_once('./includes/footer.php'); ?>
  29.  
  30. about.php:
  31.  
  32. <?php
  33. 	//Set values for page
  34. 	$page_title = "About | PHP Include Demo";
  35. 	$current_page = "about";
  36.  
  37. 	//Load header
  38. 	include_once('./includes/header.php'); 
  39. ?>
  40.  
  41. 		<div id="content">
  42.  
  43. 			<h1>About Us</h1>
  44.  
  45. 			<p>This is the second page. Filled with important words.</p>
  46.  
  47. 		</div>
  48.  
  49. <?php include_once('./includes/footer.php'); ?>
  50.  
  51. global.css (snippet):
  52.  
  53. 			/* Individual Items */
  54. 			#navigation li.home{}
  55. 				#navigation li.home a{background-position:0px 0px;}
  56. 				#navigation li.home a:hover{background-position:0px -120px;}
  57. 				#navigation li.home a.selected {background-position:0px -240px;}
  58.  
  59. 			#navigation li.about{}
  60. 				#navigation li.about a{background-position: -130px 0px;}
  61. 				#navigation li.about a:hover{background-position: -130px -120px;}
  62. 				#navigation li.about a.selected {background-position: -130px -240px;}
  63.  
  64. 			#navigation li.services{}
  65. 				#navigation li.services a{background-position: -270px 0px;}
  66. 				#navigation li.services a:hover{background-position: -270px -120px;}
  67. 				#navigation li.services a.selected {background-position: -270px -240px;}
  68.  
  69. 			#navigation li.contact{}
  70. 				#navigation li.contact a{background-position: -420px 0px;}
  71. 				#navigation li.contact a:hover{background-position:-420px -120px;}
  72. 				#navigation li.contact a.selected {background-position:-420px -240px;}
  73.  
  74. header.php:
  75.  
  76. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  77. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  78.  
  79. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  80. <head>
  81. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  82.  
  83. 	<title><?php echo $page_title; ?></title>
  84.  
  85. 	<link rel="stylesheet" href="styles/reset.css" type="text/css" />
  86. 	<link rel="stylesheet" href="styles/global.css" type="text/css" />
  87.  
  88. </head>
  89.  
  90. <body>
  91.  
  92. 	<div id="wrapper">
  93.  
  94. 		<div id="header">
  95. 			<ul id="navigation">
  96. 				<li class="home"><a <?php if ($current_page == "home") { ?>class="selected"<?php } ?> href="index.php">Home</a></li>
  97. 				<li class="about"><a <?php if ($current_page == "about") { ?>class="selected"<?php } ?> href="about.php">About</a></li>
  98. 				<li class="services"><a <?php if ($current_page == "services") { ?>class="selected"<?php } ?> href="#">Services</a></li>
  99. 				<li class="contact"><a <?php if ($current_page == "contact") { ?>class="selected"<?php } ?> href="#">Contact</a></li>
  100. 			</ul>
  101. 		</div>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.