PHP n AJAX Programming, Tools, Tutorials, Tips, Tricks: Setting Up Simple Horizontal Menu Bar Using PHPLayersMenu (Part 01)

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 http://phplayersmenu.sourceforge.net/. 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>



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

<title></title>



</head>

<body>



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



</body>

</html>

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

<script language="php">

$myDirPath = "./";

$myWwwPath = "";

</script>

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

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

<script language="javascript"

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

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

<script language="javascript"

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

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

<script language="javascript"

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

<script language="php">

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

include_once("phplayersmenu/lib/layersmenu-common.inc.php");

include_once("phplayersmenu/lib/layersmenu.inc.php");

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

$mid->setDirroot($myDirPath);

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

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

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

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

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

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

$mid->setIconsize(22, 22);

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

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

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

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

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

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

$mid->parseStructureForMenu('hormenu1');

$mid->newHorizontalMenu('hormenu1');

$mid->printHeader();

</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">

$mid->printMenu("hormenu1");

</script>

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">



</script>

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|http://sghazi.blogspot.com|Menu 1 Tag|menu1_icon.png

..|Submenu 1 of Menu 1| http://www.linux.org|Submenu 1 of Menu 1 Tag|submenu_1_1_icon.png

..|Submenu 2 of Menu 1| http://www.debian.org|Submenu 2 of Menu 1 Tag|submenu_2_1_icon.png

.|Menu2|http://www.apache.org|Menu 2 Tag|menu2_icon.png

..|Submenu 1 of Menu 2| http://www.php.net|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.

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

Thursday, March 22, 2007

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

0 Comments:

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

About Me

Previous Posts