In this article I will show you how to create menus for a website and how to reuse the same menu code in all your pages, making your menu display on each page with only 2 lines of code.

You can see these menus in action on my website www.sersoftware.com. I use the same technique for horizontal and vertical menus.

Note: Since I wrote this post, I’ve enhanced the code to a more efficient version. You can find these enhancements in the post “A better reusable menu code with PHP and CSS“.

The menu design (CSS)

The menu part is a CSS id that draws a surrounding box around each elements of an Unordered List (<ul> tag). Here is the CSS with comments to explain each element.

/* top-menu: menu's surrounding box (i.e. the menu bar) */
#top-menu {
  background: #103452;       /* Background color, change as required */
  width:1000px; height:30px; /* Menu bar size, change as required */
  margin:0 auto 0;           /* Menu bar centered horizontally */
  padding:0;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size:13px;
}

/* Menu items are part of a Unordered List */
#top-menu ul {
  list-style:none;   /* No bullet s displayed in from of items */
  margin:0 15px;     /* Starts at 15 pixel from left */
  padding:6px 0 0 0; /* To center items' text in menu bar */
}

/* Menu items are li elements of the Unordered List */
#top-menu ul li {
  display:inline; /* Menu options to display horizontally */
}

/* Menu items are also anchors within the li elements */
#top-menu ul li a {
  margin-right:4px;  /* Space between menu options */
  padding:3px 20px;  /* Padding for the option selection box */
  text-align:center; /* Text centered in the option selection box */
  color:#fff;        /* Text color of the option selection box */
  text-decoration:none; /* No underline for menu options */
}

/* Menu items colors when mouse over */
#top-menu ul li a:hover {
  background:#369;
  color:#fff;
}

/* Active menu items colors */
#top-menu ul li a.active,
#top-menu ul li a.active:hover {
  background:#6495ED;
  color:#fff;
}

The menu display (HTML)

Now that we have designed our menu, all we need to do is display it. This is pretty simple, we create a div with our top-menu id and we place the list (<ul>) and list elements (<li>) in it. Each <li> is an option of the menu.

In the example below, we have 3 options in our menu: Home, FAQ and About. Note that the selected option is using so it’s displayed differently.

<div>
  <ul>
    <li><a href="/home.html">Home</a></li>
    <li><a href="/faq.html">FAQ</a></li>
    <li><a href="/about.html">About</a></li>
  </ul>
</div>

All you need to do is to place the HTML code shown above in all the pages where you want to display the menu.

The issue and where PHP comes into play

The menus work exactly the way we want but there’s a major issue. We need to duplicate the code for every page where the menu is displayed, and as we all know code duplication is a very bad practice, a “quick and dirty” solution at best and mostly a source of maintenance nightmares.

But since we use PHP, we can use the include function to help us out, by placing the HTML code in a file (menu.html) and including it using the following PHP statement.

<?php
  include($_SERVER['DOCUMENT_ROOT'] . "/includes/menu.html");
?>

We’re getting close to a solution, but it’s still not perfect. Remember how we have to specify which menu option is currently selected by using the on the selected menu option. This means we need to have a separate file for each option in our menu. This can quickly become too much if we have a lot of menu options.

The way around this issue, it to use PHP to pass the selected option as a “parameter” to the menu file so it can automatically select the current option to activate. We’re going to use a PHP variable that we set with the current option name just before we include the menu file.

The menu file now becomes a PHP file called menu.php and is modified as shown below:

<?php

// Array containing the "active" words
$active_class = array(NULL,NULL,NULL);

// Check $top_menu_sel variable to find out which menu option
// is active and place "active" word in appropriate array cell
switch ($top_menu_sel)
{
  case "Home": $active_class[0] = "active"; break;
  case "FAQ": $active_class[1] = "active"; break;
  case "About": $active_class[2] = "active"; break;
}

// Generate HTML menu code with content from the array
echo <<<EOD

<div>
  <ul>
    <li><a href="/home.html" class="{$active_class[0]}">Home</a></li>
    <li><a href="/faq.html" class="{$active_class[1]}">FAQ</a></li>
    <li><a href="/about.html" class="{$active_class[2]}">About</a></li>
  </ul>
</div>

EOD;

?>

The last thing to do just before we include menu.php in our pages is to specify which menu option is selected.

<?php
  $top_menu_sel = "FAQ";
  include($_SERVER['DOCUMENT_ROOT'] . "/includes/menu.php");
?>

That’s it, we’ve just saved ourselves a great deal of copy and paste and most importantly, if we want to modify the menu, we only have to do it in one place.

You can customize this menu to suite your need and you can see it in action on my website: