phpguru.org - Tree menu

Home ~ Downloads ~ FAQs ~ Search ~ Licensing

Blog Categories

[Index]

Me

Employ me
LinkedIn profile

Articles

PHP5

HTML5

PHP4

Javascript

C#

Tree menu

This PHP/Javascript combo allows you to easily create a tree menu. With capable browsers, the menu is dynamic and allows the branches to be expanded/collapsed. This works AFAIK with Internet Explorer 4+, Mozilla, and Netscape Navigator 6+. With other browsers, Opera for example, the menu is static. Also, with Internet Explorer 5+, the status of the expanded/collapsed branches is persistent, (ie it survives a refresh). Each node can have an optional link and icon.

This code is available here There are two sets of icons supplied, one Windows 9x-2000 style, and the other Windows XP style. Examples of both are below.

Check out this survey of menu scripts: http://www.chipchapin.com/WebTools/MenuTools/

The code used to produce the below tree structures is below.

PHP


<?php
require_once('HTML/TreeMenu.php');

$icon = 'folder.gif';

$menu  = new HTML_TreeMenu();

$node1 = new HTML_TreeNode(array('text' => "First level",
                                 'link' => "test.php",
                                 'icon' => $icon));

$foo   = &$node1->addItem(new HTML_TreeNode(array('text' => "Second level",
                                                  'link' => "test.php",
                                                  'icon' => $icon)));

$bar   = &$foo->addItem(new HTML_TreeNode(array('text' => "Third level",
                                                'link' => "test.php",
                                                'icon' => $icon)));

$blaat = &$bar->addItem(new HTML_TreeNode(array('text' => "Fourth level",
                                                'link' => "test.php",
                                                'icon' => $icon)));

$blaat->addItem(new HTML_TreeNode(array('text' => "Fifth level",
                                        'link' => "test.php",
                                        'icon' => $icon,
                                        'cssClass' => 'treeMenuBold')));

$node1->addItem(new HTML_TreeNode(array('text' => "Second level, item 2",
                                        'link' => "test.php",
                                        'icon' => $icon)));

$node1->addItem(new HTML_TreeNode(array('text' => "Second level, item 3",
                                        'link' => "test.php",
                                        'icon' => $icon)));

$menu->addItem($node1);
$menu->addItem($node1);

// Create the presentation class
$treeMenu = &new HTML_TreeMenu_DHTML($menu, array('images' => '/images/treemenu/',
                                                  'defaultClass' => 'treeMenuDefault'));
$listBox  = &new HTML_TreeMenu_Listbox($menu);
?>

HTML


<style type="text/css">
<!--
    .treeMenuBold {
        font-weight: bold;
    }
// -->
</style>

<table border="0" width="100%">
    <tr>
        <td width="50%" valign="top">
            <?$treeMenu->printMenu()?>
            <?$listBox->printMenu()?>
        </td>

        <td width="50%" valign="top">
            <?php
                $treeMenu->images = '/images/treemenuAlt';
                $treeMenu->printMenu()
            ?>
        </td>
    </tr>
</table>

Link to me

If you use any of the code on this site (and if you don't I guess) or it makes your life easier, I'd appreciate a link - http://www.phpguru.org. Thanks.

Home ~ Downloads ~ FAQs ~ Search ~ Licensing