Highlight Current Page

Navigation demo

Start Tutorial

One way to highlight the current page your on is by using php and that's what were be using today. What were going to do is remove the link to stop people trying to click on it again by mistake and then make the text bold so it's obvious where they are. All you need todo is include topNav.php into all your pages which you want included in your navigation and then set the variables in topNav.php.



Directory tree

For the purpose of this tutorial my directory tree looks like this. So if your following along create

Directory tree


Step 1.

Save this as topNav.php and place it in your PHP folder modifying the following variables if desired.

view plainprint?
  1. <?php    
  2. // pageName is equal to filename  
  3. $pageName = basename($_SERVER['PHP_SELF'],'.php') ;  
  4.   
  5. // title text for links  
  6. $title = "Your on this page";  
  7.   
  8. // page 1 filename minus extension  
  9. $p1 = "index";  
  10.   
  11. // page 1 link text  
  12. $p1t = "Home";  
  13.   
  14. // page 2  
  15. $p2 = "news";  
  16. $p2t = "Headlines";  
  17.   
  18. // page 3  
  19. $p3 = "contact";  
  20. $p3t = "Contact Us";  
  21. ?>  
  22.   
  23. <!-- Start topNav -->  
  24. <div class="topNavContainer">  
  25. <ul class="topNav">  
  26.   
  27. <!-- page 1 -->  
  28. <li>  
  29. <!-- // if $PageName is equal too $p1 (index in this example) then echo noActive class setting title text and $p1t (link text for that page) else
     echo the link using the variables set out above -->      
  30. <?php if ($pageName == $p1) { echo '<span class="noActive" title="'.$title.'">'.$p1t.'</span>'; } else { echo '<a href="'.$p1.'.php">'.$p1t.'</a>'; } ?>  
  31. </li>  
  32.   
  33. <!-- page 2 -->  
  34. <li>  
  35. <?php if ($pageName == $p2) { echo '<span class="noActive" title="'.$title.'">'.$p2t.'</span>'; } else { echo '<a href="'.$p2.'.php">'.$p2t.'</a>'; } ?>  
  36. </li>  
  37.   
  38. <!-- page 3 -->  
  39. <li>  
  40. <?php if ($pageName == $p3) { echo '<span class="noActive" title="'.$title.'">'.$p3t.'</span>'; } else { echo '<a href="'.$p3.'.php">'.$p3t.'</a>'; } ?>  
  41. </li>  
  42.   
  43. </ul>  
  44. </div>  
  45. <!-- End topNav -->  


Step 3.

Save this as topNav.css and place it in your CSS folder

view plainprint?
  1. .topNav {  
  2. border:1px solid #000;  
  3. background-color:#FFC;  
  4. width:500px;  
  5. height:30px  
  6. }  
  7.   
  8. .topNav li {  
  9. display:inline;  
  10. list-style-type:none;  
  11. overflow:visible  
  12. }  
  13.   
  14. .topNav a {  
  15. font-family:Arial, Helvetica, sans-serif;  
  16. font-size:1.1em;  
  17. padding-right:1.5em;  
  18. padding-left:1.5em;  
  19. color:#903;  
  20. background-color:#FFC  
  21. }  
  22.   
  23. .topNav a:hover {  
  24. color:#FFF;  
  25. background-color:#903;  
  26. font-weight:700;  
  27. text-decoration:none  
  28. }  
  29.   
  30. .topNav a:active {  
  31. color:#FFF;  
  32. background-color:#006  
  33. }  
  34.   
  35. .noActive {  
  36. font-family:Arial, Helvetica, sans-serif;  
  37. font-size:1.1em;  
  38. font-weight:700;  
  39. text-decoration:none;  
  40. color:#000;  
  41. background-color:#FFC;  
  42. padding-right:1.5em;  
  43. padding-left:1.5em  
  44. }  


Step 4.

Insert this in contact.php, index.php and news.php inside the head tags.

view plainprint?
  1. <link rel="stylesheet" type="text/css" href="css/topNav.css" media="screen" />  


Now if everything is right your pages should look and work like the demo

Download

I hope you enjoyed this tutorial and that it was helpful to you in some way.
Download

End Tutorial

HTML Comment Box is loading comments...

Copyright © 2010-2011. Ian.J.Gough All rights reserved.