TreeMenu

Summary: Provides additional markup for creating a tree-like menu
Version:
Prerequisites:
Status:
Maintainer:
Categories: Layout, Administration

Description

This script provides some additional markup for creating a tree like menu known from many websites. This is achieved with help of a little bit Javascript code. The best is that ordinary lists are used to create the menu structure, no need to set some configuration files etc. The second advantage of this is, when javascript is deactivated everybody could still use the menu i.e. access the links.

Available Markup (see also example)

(:treemenu:)
begins the section within that the menu could be defined
(:treemenuend:)
ends the treemenu section

Files and Installation

Simply extract this ZIP file into the PmWiki directory and insert the following line into your config.php:

   include_once('cookbook/treemenu.php');

Example

(:treemenu:)
*HomePage
**item1
**item2
***subitem2.1
***subitem2.2
**item3
*menu2
**item4
***item4.1
****item4.1.1
*****item4.1.1.1
*****item4.1.1.2
*menu3
**nothing else
(:treemenuend:)
  • HomePage
    • item1
    • item2
      • subitem2.1
      • subitem2.2
    • item3
  • menu2
    • item4
      • item4.1
        • item4.1.1
          • item4.1.1.1
          • item4.1.1.2
  • menu3
    • nothing else

Limitations

Currently only one tree menu per webpage should be used. If more are used the display under IE is corrupted. FireFox has no problems. Maybe I can fix this as soon I found a way to add stuff into <body> or at the end of the page.

Bugs

not known .... but

It works quite well, but the tree seams to always appear expand if there is some URL in some subitem, which is quite ugly when i want to use it for the map of my website.

The javascript checks the URL of the actual page. If this URL is somwhere in the tree as link, then the tree is expanded to show the link, i.e. where you are at the moment. If you want to disable this behaviour, open treemenu.js go to function init_treemenu and comment all the section within the
if (in_menu(objItem))
. This should do the trick - Klonk

and it doesn't work well if you try to center the tree in the middle of the page, and you start to expand it.

As this script is based on lists this cannot work. You have to wrap it in another cell. (As far as I know a normal centered list is also not displayed properly) - Klonk
  • HomePage
    • item1
    • item2
      • subitem2.1
      • subitem2.2
    • item3
  • menu2
    • item4
      • item4.1
        • item4.1.1
          • item4.1.1.1
          • item4.1.1.2
  • menu3
    • nothing else

Dweezil

History

2005-03-09 first release Klonk
2005-03-22 added Main Icon Klonk

Comments

  • It would nice if a minus sign (-) could be used at the last level of each submenu, instead of showing a "false" plus sign (+) -- JCG
    • What do you mean with "false" plus sign? - Klonk
  • When i use the sidebar, all the menu items are very spaced out (vertically) and as a result the tree is disjointed. How can i compress it so that the lines of the tree merge together? (The icons currently sit above the text of each menu item). This only occurs in the sidebar, not when the sidebar is viewed as a page. --BVE
    • I think there are some special CSS settings for the Sidebar (oftenly margins differ). - Klonk
  • Any idea where these are? I have tried editing practically every relative css file, yet no change i make gives the desired effect. (Just fyi, i have very little experience with css files - literally a few days, and have learnt everything so far by (logical) experimentation. Is there a way of finding out which css files are actually being used? I couldnt see this in the skin php file but i am sure i am looking in the wrong place.) Thank you very much --BVE
    • Try to remove any additional script you are using and see what happens then. What skin are you using? Maybe the skin adds some CSS code that gives problems. - Klonk
  • Using latest PmWiki (28-Aug-2005) and Firefox 1.0.6:
    • This is a very nice extension, and so close to what I need.
    • I noticed that the example HomePage subitems do not show. I get a book (strStart) icon, and no expander box [+]. Everything is fine from menu2 onwards.
      • me too - with IE7.
      • same to me - firefox 2.0 ubuntu. I'd to add an extra *Menu at the beginbning to get a acceptable result. --AC.
    • Tip: Comment out the 'expand(...)' call in opening() to initialize list with everything closed
      • (specifically, in /pub/treemenu/treemenu.js, look for and comment out this line: "expand(objFolder.parentNode,1);" - Allan. p.s. Thanks for this, works for me. 23-Mar-12)
        • GREAT tip thanks for posting. Is there any way to have the subtree items remain expanded? This is nearly perfect. After one clicks on a menu item though the tree recloses all the open branches (very unfriendly). - 19-Feb-13
    • My sidebar becomes way too wide using (:treemenu:)
      • I fixed this problem by editing the stylesheet for my skin. For mine (monobook.css), I added a fixed number to "width" under content, pageleft, and pageleftcontent. You can also edit the "font" tag in treemenu.php to reduce the font size. -
    • When I go to a page linked from the treemenu in the sidebar, the treemenu gets reloaded and of course loses its state.
      • Try changing blnIgnoreQuery to "false" in treemenu.js -
    • - David Dawkins
  • Is there a way to feed a (:pagelist:) into this, to automatically show new pages?
    • For sure. As an example, here is the kind of code I use to build a menu from pages, organized from some Page Variables values --AC
           [[#actionsFmt]]
           (:template first:)
           (:treemenu:)
           *Actions :
           (:template first {=$:ActionGroup}:)
           *{=$:ActionGroup}
           (:template each:)
           **[[{=$FullName}]]
           (:template last:)
           (:treemenuend:)
           [[#actionsFmtEnd]]
           (:pagelist group={*$Group} fmt=#actionsFmt#actionsFmtEnd order=$:ActionGroup wrap=html:)
      
      
  • I'm using a bit different skin (abitmodern), when I use tree for left side menu, the text is not visible due to colors of background and text. Can I change the color of the text in the tree menu?
  • I changed all 4 references to UL in the javascript file to OL so it handles ordered lists instead

Question:

Is there a way to float the menu up and down as discribed here:[(approve links) edit diff]. I've tried but I think I've included the codes in the wrong location. Burialmound