PC Services

"From Payroll to Body Scanners"

Some PHP Tips and 'Tricks'

Thinking beyond each page and DESIGNING your web site

Example Menu System

Having discussed all the methods of menus, I describe the method of menu (and variants) I use on several informational sites.

The menu on the left uses the techniques -

• Different background colours for separator, selected and unselected items.
• Contrasting colours for link and normal text in all modes.
• Selected item is not a link to itself.
• As mouse pointer hovers over possible links, background colour and text colour, with underline added to text. Note that unless a DOCTYPE is in the HTML output, or the user has IE6 or less only the text background will change colour.
• Expanding menu tree method.

This is acheived using the Text buttons method with style sheets for colour schemes. Entries for menu control below -

.menu, .selected, .sep { color: white; } .menu { background-color: #6666FF; } .menu:hover, .menu A:hover { color: black; background-color: #CC9900; } .menu A:link { color: white; text-decoration: none } .menu A:visited { color: yellow; text-decoration: none } .menu A:hover { color: black; text-decoration: underline; } .selected { background-color: #CC3300; } .sep { background-color: #999999; }

The expanding menu is performed by two parts of include files -

1. Global configuration include file contains function to split the $_SERVER[ 'SCRIPT_NAME' ] into folder levels and filename without GET or '#' anchors. Which also gives data like how many '../' to prepend to get to root and an array of relative paths to your global foldes, (includes, images...) Which means this method works for local testing and hosted server, This means the correct number of relative '../' ca be prepended to higher level menu entries automatically.
2. Global menu include file that contains the top level menu array that defines each menu item, that is scanned and if the path or partial path matches an entry it is actioned as -
   • Separator - not a link, set the class for separator
   • Selected item (full path and GET match) - not a link class set class for selected./li>
   • Not selected (no path match) - set as link with class of menu
   • If pointer to sub-menu prefix with '+' if not path match, or '-' if path match.
   • Add menu item text.
   • If sub-menu entry, recursively call self using the menu array referenced (by including the file).
   • Recursion ends when end of all included arrays reached.

The sub-menu include files are referenced to be a standard file type in a sub-folder, the calling menu array contains information on the folder to find the file and the included array of menu items. All paths to sub-menus or links are relative to current folder or external links. This way only a few arrays actually need to be included, improving execution time.

The menu arrays could be tables in a database if you wanted, but that means it really should be on the same server to avoid failures. Using arrays in files uses less items of the server so is less prone to other causes of failure, if the file cannot be included wither there is a file fault, file missing, or such a fault that could not serve web pages anyway.

To improve site maintenance it is assumed the files for the referenced pages on that menu, would reside in that folder as well, so things can be moved around between sections easily. This has helped me greatly on some sites that required splitting and moving products to different categories and in some cases splitting long sections, by moving whole folder trees and changing a few menu entries.

For more information on the actual PHP scripts used here by contacting Paul Carpenter.