Virginia Web Designers: Joomla, Drupal, Open-Source, CSS, and PHP Northern Virginia / Maryland / Washington DC web designers

Easy tab highlighting with included PHP menu

I recently reworked a simple PHP site that uses standalone PHP files containing only HTML. We needed to redesign the navigation bar, which was simple a series of clickable images. These files were not generated by a Dreamweaver template or anything like that, meaning that we would have had to manually change each file every time there was a change to the menu. That seemed very annoying to me, so I created a file called navbar.php and included it into all the pages, using the standard PHP include;

<?php include(‘navbar.php’);?>

The tabs are highlighted for the current page, so if you are on “About Us”, the About Us tab should be highlighted. To accomplish this, I wrote a simple function;

A sample navigation tab would then look like this;

<a href=”consulting.php”><img src=”images/navbar-consulting<?php isactive(‘consulting.php’);?>.gif” name=”consulting” width=”104″ height=”35″ border=”0″ id=”consulting” onmouseover=”MM_swapImage(‘consulting’,”,’images/navbar-consulting-hover.gif’,1)” onmouseout=”MM_swapImgRestore()” /></a>

That simply uses the function to tell it which file name to match to the current page’s file name:

isactive(‘consulting.php’);

The end result is that on consulting.php, the HTML output for that tab would look like this:

<a href=”consulting.php”><img src=”images/navbar-consulting-hover.gif” name=”consulting” width=”104″ height=”35″ border=”0″ id=”consulting” onmouseover=”MM_swapImage(‘consulting’,”,’images/navbar-consulting-hover.gif’,1)” onmouseout=”MM_swapImgRestore()” /></a>

.. and that is done automatically using a single included file.