PHP n AJAX Programming, Tools, Tutorials, Tips, Tricks

Thursday, March 22, 2007

Setting Up Simple Horizontal Menu Bar Using PHPLayersMenu (Part 01)

Add to Technorati Favorites

PHPLayersMenu is an easy-to-use, flexible, and advanced Menu System for PHP. With PHPLayerMenu, you don’t have to write your own code to create a menu bar. Moreover, PHPLayersMenu is compatible with many browsers. According to PHPLayersMenu’s home page, it is compatible with the following:

Layers-based menus require JavaScript and work at least on the following browsers:

  • Mozilla 0.6+ (versions 0.9.2+ are suggested)

  • Netscape 6.0+ and other browsers based on Mozilla, e.g. Epiphany and Galeon

  • Konqueror 2.2+ and browsers based on it, e.g. Safari

  • Opera 6.x for Linux

  • Opera 7.x

  • Internet Explorer 5, 5.5, 6.

If old-style templates are used instead of the default ones, layers-based menus work also on the following browsers:

  • Netscape 4.07+

  • Opera 5.x and 6.x

  • Internet Explorer 4

Before we proceed,

DISCLAIMER: I have made every attempt to present accurate information, but I cannot guarantee that inaccuracies will not occur. I (the author) will not be held responsible for any claim, loss, damage or inconvenience caused as a result of any information found on this website (blog).

For this tutorial, I am assuming that the PHP script that uses PHPLayersMenu resides in a folder named ‘test’. Also, I’ll only show how to set up a horizontal Menu bar.

Menu Installation

Follow the steps below:

  • Download PHPLayersMenu from The version that I used for this tutorial is 3.2.0.

  • Extract files from the downloaded file into a folder named “phplayersmenu”.

  • Copy PHPLayersMenu script folder inside the folder ‘ test’.

  • Now, I’ll start off with a simple php page. Name this file “menu.php”. Copy and paste the HTML code below to “menu.php”.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">


<!-- PhpLayersmenu Code Section 01 //-->

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<!-- PhpLayersmenu Code Section 02 //-->



<!-- PhpLayersmenu Code Section 03 //-->

<table><tr><td>html code here</td></tr></table>

<!-- PhpLayersmenu Code Section 04 //-->



  • In section 01 of menu.php, copy and paste the code below.

<script language="php">

$myDirPath = "./";

$myWwwPath = "";


  • In section 02 of menu.php, copy and paste code below.

  1. <link href="phplayersmenu/layersmenu-keramik.css" rel="stylesheet" type="text/css"

  2. />

  3. <script language="javascript"

  4. src="phplayersmenu/libjs/layersmenu-browser_detection.js"

  5. type="text/javascript"></script>

  6. <script language="javascript"

  7. src="phplayersmenu/libjs/layersmenu-library.js"

  8. type="text/javascript"></script>

  9. <script language="javascript"

  10. src="phplayersmenu/libjs/layersmenu.js" type="text/javascript"></script>

  11. <script language="php">

  12. include_once("phplayersmenu/lib/PHPLIB.php");

  13. include_once("phplayersmenu/lib/");

  14. include_once("phplayersmenu/lib/");

  15. $mid = new LayersMenu(3, 8, 1, 1);

  16. $mid->setDirroot($myDirPath);

  17. $mid->setLibjsdir('phplayersmenu/libjs/');

  18. $mid->setTpldir('phplayersmenu/templates/');

  19. $mid->setImgdir('phplayersmenu/menuimages/');

  20. $mid->setImgwww('phplayersmenu/menuimages/');

  21. $mid->setIcondir('phplayersmenu/menuicons/');

  22. $mid->setIconwww('phplayersmenu/menuicons/');

  23. $mid->setIconsize(22, 22);

  24. $mid->setTpldir('phplayersmenu/templates/');

  25. $mid->setHorizontalMenuTpl('layersmenu-horizontal_menu-keramik-full.ihtml');

  26. $mid->setSubMenuTpl('layersmenu-sub_menu-keramik.ihtml');

  27. $mid->setDownArrowImg('down-arrow.png');

  28. $mid->setForwardArrowImg('forward-arrow.png');

  29. $mid->setMenuStructureFile('layersmenu-horizontal-1.txt');

  30. $mid->parseStructureForMenu('hormenu1');

  31. $mid->newHorizontalMenu('hormenu1');

  32. $mid->printHeader();

  33. </script>

  • In Section 03 (in menu.php), copy and paste the code below. This is the place where PHP creates the menu bar.

<script language="php">



  • In Section 04 (in menu.php), copy and paste the code below. This should be just above the closing body tag.

<?php $mid->printFooter(); ?>

<script language="javascript" type="text/javascript">


loaded = 1;



  • You also have to create a text file containing the menu items, icons, and links (for more read the files that come with PHPLayersMenu). For now, this file will be named “layersmenu-horizontal-1.txt”. So create a new text file named “layersmenu-horizontal-1.txt” and copy and paste the text below. Items that start with ‘.’ represent top-level menu items and items that start with ‘..’ represent sub menu items. Fields are delimited by the pipe character ‘|’.

.|Menu1||Menu 1 Tag|menu1_icon.png

..|Submenu 1 of Menu 1||Submenu 1 of Menu 1 Tag|submenu_1_1_icon.png

..|Submenu 2 of Menu 1||Submenu 2 of Menu 1 Tag|submenu_2_1_icon.png

.|Menu2||Menu 2 Tag|menu2_icon.png

..|Submenu 1 of Menu 2||Submenu 1 of Menu 2 Tag|submenu_1_2_icon.png

  • Icons must be stored in the directory represented by $mid->setIcondir('’);. The default is ‘phplayersmenu/menuicons/’. So, save all the icon files in this folder.

Upload the Files and folders (phplayersmenu, layersmenu-horizontal-1.txt, and menu.php) and go to menu.php using your favorite browser (must be a supported browser with Javascript Enabled) and go to menu.php. You should see a horizontal layered menu.


Post a Comment

Subscribe to Post Comments [Atom]

<< Home