• View
• Edit
• History
• Attach
• Print
• Backlinks

HorizontalVerticalMenu

Description

This script provides additional markup for easy generation of multilevel horizontal and vertical menus. (This technique is also used with the advanced version of the DropDownSkin. Advanced means that it provides special markup). I took the idea from here and here and just optimised it and changed it so it can be used with PmWiki.

Available Markup (see also examples)

(:hmenu:)

begins a horizontal menu. Available options are up (opens the menu upwards) and left (open menu to the left). These options can be combined, e.g (:hmenu up left:).

(:vmenu:)

begins a vertical menu. Same options as with hmenu available.

(:newmenu:)

needed for separation of main menu items (mainly when using hmenu)

(:emenu:)

begin expanded menu. Availbale options are up (no floating) and left (text is written left of the menu)

*

menuitem (same as bullet list)

* ----

separator line (should be placed after any submenues)

(:menuend:)

end the menu

Files and Installation

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

   include_once('cookbook/menus.php');

Now you can create menus whereever you want.

Examples

Horizontal menu:

 (:hmenu:)
 *Level 0
 (:newmenu:)
 *Level 0.1
 **Level 1
 ***Level 2
 **Level 1.1
 (:menuend:)

Vertical menu:

 (:vmenu:)
 *Level 0
 **Level 1
 ***Level 2
 **Level 1.1
 *Level 0.1
 (:menuend:)

Expanded menu:

 (:emenu:)
 *Level 0
 **Level 1
 ***Level 2
 **Level 1.1
 *Level 0.1
 (:menuend:)

See a live example here

Dynamically Generated with Pagelists

This makes a nice big menu of backlinks all the way up to the page that has a menu. Note the strangeness in it's construction...

My menu:

(:vmenu:)
(:pagelist link={$Name} fmt=#sb1:)
(:menuend:)

My pagelist template

[[#sb1]]
(:template defaults order=title:)
*[[{=$FullName}|{=$Titlespaced}]](:pagelist link={=$FullName} fmt=#sb2:)
[[#sb1end]]

[[#sb2]]
(:template defaults order=title:)
*[[{=$FullName}|{=$Titlespaced}]](:pagelist link={=$FullName} fmt=#sb3:)
[[#sb2end]]

[[#sb3]]
(:template defaults order=title:)
*[[{=$FullName}|{=$Titlespaced}]](:pagelist link={=$FullName} fmt=#sb4:)
[[#sb3end]]

[[#sb4]]
(:template defaults order=title:)
*[[{=$FullName}|{=$Titlespaced}]]
[[#sb4end]]

Limitations

• If you want to change the CSS file always use colored backrounds for menuitem, menutitle, otherwise the menu won't work correctly within IE.
• As IE also only recognizes :hover with links you need the csshover.htc file, which gives IE the ability to recognize. I included it into the ZIP file but you can get always the newest version here: http://www.xs4all.nl/~peterned (whatever:hover). There migth occur a problem with this file with Win XP2. The server must deliver the mime-type text/x-component for .htc files.
• With the actual CSS file up to 5 levels are possible

Bugs

• not known

History

• 18-Feb-2005 minor design update Klonk
• 19-Feb-2005 improved compatibility with wikistyles Klonk
• 23-Feb-2005 fixed difference in display between IE and FireFox, added possibility to change the way the menu opens. Klonk
• 10-Mar-2005 major rewrite to remove new markup and use standard markup * (bullet list) instead Klonk
• 30-Sep-2005 updated to newest version of csshover.htc Klonk
• 20-Mar-2006 updated to newest version of csshover.htc (1.42) Klonk
• 28-Mar-2007 added (:emenu:) markup - Expanded menu, separator is now also possible within main menu (should not be used in main hmenu)
• 01-Jul-2007 unofficial update http://www.waipahedesigns.34sp.com/Downloads/csshoverphp.rar(approve links) this allows you to use the hover in IE if you do not have access to your Mime-type. use these files in replace of the offical ones. resources take from http://www.hoeben.net/aldo/htc_components_in_xp_service_pack_2_2(approve links) -- Chris Daniel.
• 19-Jan-2008 Bug fix! No longer does this recipe add backslashes before double-quotes! Yay!

Comments

• 11-Jun-2007 In a farm config, the pub path isn't working correctly. Instead of going to pmwiki/pub/menus, it goes to /pmwiki/wiki farm site/pub/menus. Thanks for writing a really slick script. --Scott Smith
• 2006-11-01 I tried the script "out of the box" .. didn't work. I copied the menus.php in to coobook, added the line to my config.php, and also copied the menu's folder containing the .css file to pub/skins/menus. The script is working (eg. i put some test html in the code and it displayed fine, so I know the script is being called ok), but the .css part isn't working, so the menu is not rendered properly. I'm running XP + SP2 + IE6 + EasyPHP (Apache + PHP + MySQL). I don't want to mess around with server settings .. isn't there some way to just "make it work"? Maybe I'm missing something. (-SL)

Extract the ZIP file into the pmwiki directory completly with path. Then The .css file should be placed in pub/menus. And you'll see it works then - Klonk March 28, 2007, at 02:06 AM

I think it'd be nice if this script could make use of the bullet list markups rather than introducing a new one. --Pm

• I agree, but I had the choice: Either introduce a new markup or everyone has to use additional wikistyles to make the menus work (see new version DropDownSkin). So I decided for simplicity and ease of use to introduce a new markup. And the width of the element within the <LI> has to be set, otherwise the result would look different in IE and FireFox. So in my eyes this is the simplest and easiest solution. - Klonk
  • I looked again closer at it and found an easy way to use standard markup. So additional "new" markup was removed. -Klonk

I'm merging the evolver skin with a template from an existing website I maintain. One of the things I need is a drop down menu on the page, so I added this menu.

The problem is, I can see the code for the drop down menu when I go to View -> Page source in Firefox, but the menu doesn't show up on the page. Is there a div id or class that I need to add a z-index to in the css or something? If I simply comment out the css link in the template, the menu shows up great (though of course the page looks awful). I've tried looking through the page source in Firefox and added a z-index to a couple divs, but it doesn't seem to have changed anything.

Does anyone have any hints? TIA. --stormspotter

• I found it. The <!-- PageInlineStyle --> tag had been left out of the template, which resulted in pub/menus/cssmenu.css not being called. --stormspotter

I'm getting extra backslashes in rendered markup. Here is the markup I am using:

This is a "test."
*This is a "test."

It displays in my browser like this:

This is a "test."
 * This is a \"test.\"

This bug is squashed. Works great now.

Getting this to work with IE and XP SP2 when served by Apache:

--knightPhlight

this works Firefox and partialy works in IE7 but puts a empty space when a menu button has sub menus, so you cant select the one below it., exellent work well done, i'll have to point people to firefox for the site, any ETA on the functionality in IE 6? would apreciate it.

• IE 6 works (at least here). One thing I recognized with IE: When an menuentry is empty or only contains spaces you are not able to select it. I would suggest to place anything there (maybe a simple dash?) then it should work again - Klonk March 20, 2006, at 02:30 AM

i'm having some annoying problems with IE, where it puts a small space after the first entery to the menu this stops you form being able to select the lower sections, i've looked at the whaterever:hover site and the example on there works, what has this got in it that the scrip here does not? anyone help me out, or is there a browser detect redirect script that we have? . or can i use the hide mark ups to, hide and show menus depending upon the browser type?

• Sorry I'm not able to reproduce this problem here (IE 6) - Klonk March 27, 2007, at 07:54 AM
  • this occurs in IE7 only. Any Idea how to fix it ņos? January 21, 2008, at 09:23 AM

In IE7, with the aforementioned csshover.htc update, I am getting the bullets displayed. This is not the case for Firefox 2 and IE6. I'm using beta 2.2.0-beta-44 --Scott Smith

• Scott, I was having the same problem, but managed to fix it as follows. In the cssmenu.css file, look for the following style definition. Add "list-style-type" and "list-style-image" to the end of the style. Both should be set to "none":

 div#hmenu .menuitem,
 div#hmenu .menutitle,
 div#vmenu .menuitem,
 div#vmenu .menutitle,
 div#emenu .menuitem,
 div#emenu .menutitle {
	display:block;
	width:100%;
	background:#ddd;
	margin:0;
	padding:1px 0;
	font-size:95%;
	text-indent:3px;
	white-space:nowrap;
	list-style-type: none;
	list-style-image: none;
 }

-- C.R. Andrews, Jr.

only occurs I have no problems getting the menus.php to work with the original PmWiki installation in the farm, but the other wikis are not working. Is this farm friendly? I'm using beta 2.2.0-beta-44 --Scott Smith

Same Here I could put the script to work in a plane instalation but not in a farm installation, anybody has put it to work in a farm ? --Edwin Marte, Nov 23,2007