TreeMenu
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');
treemenu-20181207.phpΔ is a patched 2005-03-09 version that resolves "error: preg_replace(): The /e modifier is no longer supported" (tested on pmwiki-2.2.110).
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:) |
(:treemenu:)
(:treemenuend:) |
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.
(:treemenu:)
- HomePage
- Cookbook
(:treemenuend:)
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.
|
(:treemenu:)
(:treemenuend:) |
Dweezil
History
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
- (specifically, in /pub/treemenu/treemenu.js, look for and comment out this line: "
- 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:)
- 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
- 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
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
User notes? : If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.