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


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



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.