How to Create a Dynamic Menu on a Static Site Using PHP Includes

If you have a static html website, but want to build an attractive and stylish menu, with different hover styles and active styles and sub menus, then it is really quite simple. To get it working, the only thing you need to do is either use .php pages or have the following code in your .htaccess, which allows php to be parsed on .html pages. This code comes in very useful for various other items, such as banner/content rotations and other includes.

RemoveHandler .html .htm
AddType application/x-httpd-php .php .htm .html

A good example of this in action is the menu on MotleyHealth.com.

Possibly the biggest advantage of this method it that you only need one menu code block on the site, rather than separate menus for each page/section of the site. Rule number one when coding is “write the code once, and once only”.

First on each page (in individual section headers) is some php to designate each page (this will then control the menu styles for the different sections). e.g.

<?php $thisPage=”weightloss”; ?>

Then the menu looks a bit like this:


<div id="nav">

<ul<?php

if ($thisPage==”home”)

echo ” class=\”current\”";

else echo ” class=\”select\”";?>><li><a href=”/”><b>Home</b>

<!–[if IE 7]><!–></a><!–<![endif]–><!–[if lte IE 6]><table><tr><td><![endif]–><ul<?php

if ($thisPage==”home”)

echo ” class=\”sub_active\”";

else echo ” class=\”sub\”";?>>

<li><a href=”http://www.motleyhealth.com/search/”>Search</a></li>

<li><a href=”http://www.motleyhealth.com/sitemap.html”>Site Map</a></li>

<li><a href=”http://www.motleyhealth.com/aboutus.html”>About</a></li>

<li><a href=”http://www.motleyhealth.com/contact.html”>Contact</a></li>

<li><a href=”http://www.motleyhealth.com/privacy.html”>Privacy</a></li>

<li><a href=”http://www.motleyhealth.com/disclaimer.html”>Disclaimer</a></li>

<li><a href=”http://www.motleyhealth.co.uk/fitness-store-discount-codes-and-money-off-coupons”>Money Off Coupons !</a></li>

<li><a href=”http://www.motleyhealth.com/web-search/”>Web Search</a></li>

</ul>

<!–[if lte IE 6]></td></tr></table></a><![endif]–></li></ul>

etc. etc. ….. (this is just a snippet of the code)

And finally the CSS:

/* CSS Document */
/* ======
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/doors_drop_line_three.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
========= */
#nav {margin:1px 0 1px 0;}

/* the styling */
#nav {float:left; width:100%; height:auto; background:#fff url(”dropline/bottom_line.gif”) repeat-x bottom; position:relative;}

#nav .select, #nav .current {margin:0; padding:0; list-style:none; display:block;}

#nav li {display:inline; margin:0; padding:0;height:auto;}

#nav .select a,
#nav .current a {display:block; height:21px; float:left; background: url(”/menu-files/left_blue.gif”) no-repeat left top; padding:0 0 0 3px; border-bottom:1px solid #000; text-decoration:none; font-size:10px; line-height:20px; white-space:nowrap; margin-left:2px;}
* html #nav .select a, * html #nav .current a {width:1px;}

#nav .select a b,
#nav .current a b {height:100%; display:block; background:url(”/menu-files/right_blue.gif”) no-repeat right top; padding:0 6px 0 3px; color:#000;}

#nav .select a:hover,
#nav .select li:hover a {background-position:0 -75px; border-color:#046; cursor:pointer;}

#nav .select a:hover b,
#nav .select li:hover a b {background-position:100% -75px; border-color:#046; color:#fff;}

#nav .sub {display:none;}

/* for IE5.5 and IE6 only */
#nav table {position:absolute; border-collapse:collapse; left:0; top:0; font-size:11px;}

#nav .current a {background-position:0 -75px; border-color:#046;}
#nav .current a b {background-position:100% -75px; color:#ff6;}

#nav .sub li a:hover,
#nav .select a:hover .sub li a:hover,
#nav .select li:hover .sub li a:hover {background:#3D7397 url(/menu-files/sub_sep.gif) top right no-repeat; color:#fff; text-decoration:underline;}

#nav .sub_active .current_sub a,
#nav .sub_active a:hover {background:#3D7397 url(/menu-files/sub_sep.gif) top right no-repeat; color:#ff6; text-decoration:underline;}

#nav .select li a:hover .sub,
#nav .select li:hover .sub {display:block; position:absolute; width:970px; top:21px; left:0; background:#3D7397; margin-top:1px; padding:0; z-index:100; border-bottom:5px solid #fff;}

#nav .sub, #nav .sub_active {margin:0; padding:0; list-style:none;}
#nav .sub_active {display:block; position:absolute; width:970px; top:21px; left:0; background:#3D7397; margin-top:1px; padding:0; z-index:10; color:#000; border-bottom:5px solid #fff;}
* html #nav .sub_active, * html #nav .select a:hover .sub {z-index:-1; margin-top:0; margin-t\op:1px;}

#nav .sub_active a {height:25px; float:left; text-decoration:none; line-height:24px; white-space:nowrap; font-weight:normal;}
#nav .sub_active a,
#nav .select a:hover .sub li a,
#nav .select li:hover .sub li a {display:inline; background:#3D7397 url(/menu-files/sub_sep.gif) top right no-repeat; padding:0 10px; margin:0; font-size:10px; width:auto; white-space:nowrap; font-weight:normal; border:0; color:#fff; height:25px; line-height:24px; }

So you get highlighted menu items on hover, and also “current” and “sub-active” menus for the sections.

One menu, one stylesheet, one bit of code for each page/section include. Plus some images for the menu.

Basically it’s one of Stu Nichol’s menus with some php chucked in.

The menu is called up onto each page (or each section header to be precise) with:

< ? php include(‘includes/logo-menu.htm’); ? >

Simple as that. So a site with 500 pages with 10 sections needs only one menu file.

To Recap:

1. Modify .htaccess to allow php to parse in any html page

2. Categorise each page/section of your site with the code <?php $thisPage=”page1″; ?>

3. Add the code into the UL elements of the menu, so that the UL elements will either read class=”current” or class=”select” and then the corresponding CSS with determine how it looks.

This demo file should get you started. You will need to ensure that the paths to the images, style etc are all correct, as my directory structure is a little odd after years of haphazard evolution! For example, on my main site, I have the follow structure:

/dropline/ – this is where the menu images and css is kept. The css is thus called up in the head section with

link rel="stylesheet" media="all" type="text/css"
  href="http://www.motleyhealth.com/dropline/style.css"

/includes/ – this is where I keep the actual menu code, along with other includes, like advertising blocks, footers and the like. Really for the menu it may as well be in the dropline directory, but the dropline solution came later, and I updated the site a little at a time.

Also my menu include is also inside another include (one called menu-head) which in turn is inside the site section includes. It is a little crazy, and it does not have to be like that, but I have not got around to tidying it up yet. There was some logic to all this madness, but now it is lost in time.

Download to zipped file with examples of: .htaccess, menu_code (i.e. the file to (php_inlcude / SSI), plus the “dropline” men directory with the stylesheet and the 4 images.

Tags: css menu, cssplay, dynamic menu, menu SSI, php includes, server side includes, stu nicolls