OpenCrypt - Membership Software
Username:
Password:
Register / My Account / Forgotten Password?
 Home  Features and Benefits  Online Demonstration  Purchase  Our Services  Help and Support  my.OpenCrypt 
 Welcome  New Visitor  Latest NewsRSS Feed Company Information  Press/Testimonials  Frequently Asked Questions  BlogNew Content
AJAX Tree Menu with PHP
Monday 9th June 2008

We have recently developed an AJAX tree menu function as part of OpenCrypt version 2.0 which we hoped you might find useful when developing your PHP applications. AJAX Tree Menu with PHP
 
Article Updated
View Latest Version

 
The tree menu offers a convenient method for organising data, whether links or other information which can be grouped. In our example you will see the tree menu function as a navigation menu, but the tree menu can be used for any purpose, for example we use it for selecting categories to search.
 
The tree menu function supports a limitless depth of options, and can be displayed in table and non-table formats. The function also includes the option to display checkbox selection boxes next to each option in the menu which can be used to select the options.
 
Usage

After setting the general variables and stylesheets as per the example file (see 'Configuration' instructions below), simply use the following to generate an AJAX tree menu:
 
$tree_data = array(
	array(
	name => "Option",
	url => "http://www.OpenCrypt.com/index.php",
	parent => "0"),
	array(
	name => "Sub-Option",
	url => "http://www.OpenCrypt.com/blog.php",
	parent => "Option")
);

require "ajax_tree.php";
$output = ajax_tree($tree_data);
 
To include the AJAX tree menu in a table and with checkboxes:
 
$output = ajax_tree($tree_data, 1, 1);
 
Note, the returned output must be printed after the CSS/JavaScript headers have been printed (included in example.php).
 
The three input flags are used as outlined below:
 
ajax_tree(TREE DATA ARRAY, ENABLE CHECKBOXES, ENABLE TABLES);

  • TREE DATA ARRAY

    This input is used to parse the array of options to be included in the tree menu. See below or see example file for guidance setting up array.

  • ENABLE CHECKBOXES

    Display checkboxes next to each menu option, set to '1' to enable, leave blank or set to '0' to disable. The name for each checkbox is generated from the option name, all non-alphanumeric charaters are removed from the name including any spaces and the name is prefixed with 'check_'. e.g. 'Another Option' or 'Another_Option' would become 'check_AnotherOption'.

  • ENABLE TABLES

    Display menu options in tables, set to '1' to enable, leave blank or set to '0' to disable. The colour of the tables can be controlled using the $ajax_tree_table variables which are outlined below.

 
Configuration

The example.php file contains various JavaScript and CSS/Stylesheets which must be included before loading the AJAX tree menu. A PHP array of options to be displayed in the tree must also be parsed to the function. The array must include a 'name' and 'parent' value for each option, the 'url' value is not required and the link will be used to expand and collapse the option if no URL is provided. The 'parent' value must match the name of the option this option should be listed under. If the option is to be displayed at the top/root level then the parent should be set as '0'. The sub-options have been indented in the following example to aid your understanding.
 
$tree_data = array(
	array(
	name => "Top Level Option",
	url => "http://www.OpenCrypt.com/",
	parent => "0"),

		array(
		name => "Second Level Option",
		url => "http://www.OpenCrypt.com/blog.php",
		parent => "Top Level Option"),

			array(
			name => "Third Level Option",
			url => "http://www.OpenCrypt.com/news.php",
			parent => "Second Level Option"),

		array(
		name => "Another Second Level Option",
		url => "http://www.OpenCrypt.com/features.php",
		parent => "Top Level Option"),

	array(
	name => "Another Top Level Option",
	url => "http://my.OpenCrypt.com/",
	parent => "0"),
);
 
The following variables can also be set to control the colour of the option tables, the text style is controlled with CSS/stylesheets. Note, you can add more options (incrementing the identifying number) if the depth of your menu requires them. Note, '0' is the top/root level, '1' would be the next level and so on...
 
$ajax_tree_table['0'] = "ffffff";
$ajax_tree_table['1'] = "eeeeee";
$ajax_tree_table['2'] = "e5e5e5";
$ajax_tree_table['3'] = "dddddd";
 
License and Download

This code is Open Source and is released under the GNU General Public License.
   
We hope you find this code of use, if you use it in your projects we'd love to hear about it! And of course, if you have any questions please don't hesitate to post a comment and we will respond as soon as possible.
 
Syntax highlighting powered by JUSH

 
Share this article:
Delicious Stumble It!
Stumble It!
 
<- AJAX data listings engine with PHP and mySQL (BETA)
 
PHP subscriber counter with Addicted to Feedburner class and Feedburner Awareness API ->
Articles
Subscribe to RSS Feed
OpenCrypt Version 1.9
New Product: myRepono Website Backup Service
Website Pre-Launch Checklist
ionix in 2010
PHP Security Tips - Part 1
OpenCrypt 1.8 New Feature Highlights
Video Conversion API
We're on Twitter!
IP Location API
Integrating OpenCrypt's PHP Login Interface
Developing Mobile Web Sites
Service Recovery
Building relationships with your customers
Doing the unexpected
PHP/JavaScript World Map with Continent and Ocean Selection
We've Moved!
Customer Showcase: A-Z-Animals.com
Optimising your secure content for Google
Membership business models
AJAX Calendar with PHP and mySQL
PHP Function for Reciprocal Linkback Checking
AJAX Tree Menu with PHP - Revisited
What is membership software?
Login form designs and inspiration
PHP subscriber counter with Addicted to Feedburner class and Feedburner Awareness API
AJAX Tree Menu with PHP
AJAX data listings engine with PHP and mySQL (BETA)
Join the ionix Team!
Press Release: OpenCrypt 2.0 in Development!
PHP: Basic functions for quickstart PHP framework
Welcome to the OpenCrypt Blog!
Visitor Comments
Kadurini 9 out of 10
Space Holder
Great work. Very simple to implement and use. I was wondering if it is possible to leave one of the first top level expanded all time.
Thanks for the great tree menu.

Space Holder
Space Holder
Mike 9 out of 10
Space Holder
Thanks for the update, which is much appreciated. Unfortunately it would seem that I haven't made myself clear. What I am trying to achieve is as follows: let's describe the hierarchy as 1 for root, 1.1 for sublevel one, 1.1.1 for a sublevel of sublevel one and so on ( e.g. 1.1.1.1; 1.1.1.1.1...) so a typical hierarchay would be
1 - RANK 1
1.1 - RANK 2
1.1.1 - RANK 3
1.1.1.1 - RANK 4
1.1.1.2
1.1.2
1.1.3
1.2 - RANK 2
1.2.1 - RANK 3
1.2.2
1.2.3
1.3 - RANK 2
1.3.1 - RANK 3
2 - RANK 1
2.1 - RANK 2
2.2
and so on...

So, using my example above,let's assume the state is that item 1 is open, and sublevel 1.1 is open, and of course, item 2 (and all its sub-levels) is/are closed, and item 1.2 and item 1.3 (and their sublevels) are closed.
By clicking on item 1.2 I would like it to open, and item 1.3 and 1.1 to close. Similarly, when 1.3 is open, 1.2 and 1.1 will be closed but clicking on 1.1 will open it and 1.2 1n.3 will close.
Similarly for each level, sub level and sub-sub level. Thus, only one member of any RANK (which has sub-level) can be open at any time. If we think of it as folders and files, then only one folder at a given RANK can be open at one time, of course the folders which contain the open folder will be open.
I hope that I have explained myself properly, but I don't believe that v2 of the menu implements this behaviour.
PS there are now FOUR input flags, so the USAGE information on the blog is somewhat misleading.

Space Holder
Space Holder
Mike 10 out of 10
Space Holder
Great piece of work, neat, and compact. I was wondering if you could help me out with implementing an additional feature in your nifty little menu. I would like to make this such that when one clicks on a different heading AT THE SAME LEVEL in the tree, the existing open level collapses and the new level opens. I don't have much experience with PHP but am reasonably competent with HTML and CSS.
Space Holder
Space Holder
Average Rating: 9.33 out of 10 (3 Votes)
Space Holder
Submit Comment
Space Holder
Article Rating:
Space Holder
Your Name:
Space Holder
Your Comment/Response:
Space Holder
Space Holder
Space Holder

Follow us on Twitter

Copyright © 1999 - 2011 ionix Limited. Affiliates, Contact Us

Powered by OpenCrypt Membership Software, Backups by myRepono Website Backup