Categorized | News

Creating Dynamic Menus with HTML_TreeMenu

Posted on 27 February 2003 by Demian Turner

bugfix 03.03.2002 : ensureVisible element in $nodeOptions array needs to be null

Creating navigation systems is always a major part of putting together a web project. Using a database-driven dynamic menu system is often a good idea, and with the release PHPguru‘s HTML_TreeMenu classes, included in the PEAR library, the prospect is now much more accessible.

The three main steps involved in developing a database-driven menu system are

  1. build the database
  2. choose the appropriate library classes
  3. assemble the required front-end code

This article will cover each of these steps in more detail.

Build the Database
There are various approaches to structuring navigation trees, this article will use the simplest, the so-called parentID structure, recently dubbed the ‘brain-dead’ method by Wolfram Kriesing for it’s astonishing simplicity.

Apologies for non-MSIE users, the code snippets don’t render well in Netscape 6+. You can always view the associated .phps file.

+----+------------+--------+
| id | name       | parent |
+----+------------+--------+
|  1 | Europe     |      0 |
|  2 | N. America |      0 |
|  3 | Asia       |      0 |
|  4 | Spain      |      1 |
|  5 | Madrid     |      4 |
|  6 | Germany    |      1 |
|  7 | Berlin     |      6 |
+----+------------+--------+

 

Bookmark and Share

7 Comments For This Post

  1. darthwonka Says:

    I have copied this code verbatim and can\’t get anything but the select menu to work. The DB is connecting and the javascript is being generated..
    <code>
    <html>
    <head>
    <style type=\"text/css\">
    .treeMenuDefault &#123;
    font-style: italic;
    &#125;
    </style>
    <script src=\"TreeMenu.js\" language=\"JavaScript\" type=\"text/javascript\"></script>
    </head>
    <body>

    <script language=\"javascript\" type=\"text/javascript\">
    objTreeMenu_1 = new TreeMenu(\"imagesAlt\", \"objTreeMenu_1\", \"_self\", \"treeMenuDefault\", true, false);
    newNode = objTreeMenu_1.addItem(new TreeNode(\’default\’, \’folder.gif\’, null, true, true, \’\’, \’_self\’, \’folder-expanded.gif\’));
    newNode = objTreeMenu_1.addItem(new TreeNode(\’Telemetry\’, \’folder.gif\’, null, true, true, \’\’, \’_self\’, \’folder-expanded.gif\’));
    newNode = objTreeMenu_1.addItem(new TreeNode(\’Target\’, \’folder.gif\’, null, true, true, \’\’, \’_self\’, \’folder-expanded.gif\’));
    newNode = objTreeMenu_1.addItem(new TreeNode(\’Instrument\’, \’folder.gif\’, null, true, true, \’\’, \’_self\’, \’folder-expanded.gif\’));
    newNode = objTreeMenu_1.addItem(new TreeNode(\’Chronology\’, \’folder.gif\’, null, true, true, \’\’, \’_self\’, \’folder-expanded.gif\’));
    newNode = objTreeMenu_1.addItem(new TreeNode(\’General\’, \’folder.gif\’, null, true, true, \’\’, \’_self\’, \’folder-expanded.gif\’));

    objTreeMenu_1.drawMenu();
    objTreeMenu_1.resetBranches();
    </script></body>
    </html>
    </code>


    "WE are the music-makers
    And we are the dreamers of dreams"
    — Arthur William Edgar O’Shaughnessy 1844-1881

  2. Burnwine Says:

    using the example from the Article is working but when i\’m trying to use my table from mysql with the same table names the browser freezes, probably an infinite loop somewhere in the class files:

    i was trying this:

    table: KatID,name,Level,NodTyp,parent,id

    name is the name !?!?!….

    parent is the number for the parent ?!??!…

    id is an auto_increment number generated for all the rows in the table….

    ex. an item with id 5 would be the parent for all items with parent number 5 right?….

    the problem is that i have 38 items on level 0 = parent number 0

    then each of these parents have a pretty large number of childs but the deepest level to reach is 4

    is there a maximum number of nodes to be used or should i consider to break up this table into small tables…..

    i would really need some help with this thx ;D

  3. codenamevzig Says:

    Hi

    I have been able to successfully follow the tutorial and have been able to craete the tree structure from the database within access. I have a problem with the “links”. I want the links of each node to be something like: “index.php?id=” $ id

    Can you tell me how to do it?

    Thanks

  4. Malagas Says:

    In order to use diferent id’s for each menu, you have to alter parameter ‘link’ from $nodeoptions with “index.php?id=”.

    The next step requires a simple addon on TreeMenu.php, in case ‘heyes’, near line 177. Inside thue foreach cycle, where the total object for menu is bilt, after :

    $parentNode = &$treeMenu->addItem(new HTML_TreeNode(array_merge($params[‘nodeOptions’], $tag)));

    Just add this:

    $parentNode->link .= $parentNode->id;

    By this, you add the menu id’s already built on the link made on $nodeOptions.

  5. roshan Says:

    i modified the lines as you mentioned above but still i am not gettting the links with id

  6. Avi O Says:

    I installed the product and it works handling only 3 levels.

    how can it works with more levels?

    thank you

  7. bill Says:

    would be nice to see the link to the next page …

1 Trackbacks For This Post

  1. PEAR tutorials | PHP kitchen Says:

    […] http://www.phpkitchen.com […]

Leave a Reply

Categories

Books

Demian Turner's currently-reading book recommendations, reviews, favorite quotes, book clubs, book trivia, book lists

Facebook