How do I create a horizontal menu

I want to render this:

• One
• Two
• Three

As Example 1:

One | Two | Three

Or preferably (note the use of the title tag: hover over the number) Example 2:

1 | 2 | 3

This is useful when you split a large document up over a dozen chapters. The horizontal menu allows easy navigation between chapters.

Example 1 can be achieved with a div and styles. It works OK if the chapter titles are short words and there are few chapters. It looks lousy when the chapter titles are meaningful and there are many, because the horizontal menu runs over a couple of lines and is hard to read.

Example 2 can not be achieved with a div and styles, because the title (and in IE the alt) tag need to be inserted. This type of menu can fit the whole alphabet on a line. Frequent visitors to the page often remember what the numbers mean. And infrequent visitors get help through the title tag.

I checked the plugins and cannot find a Plugin that does this. Should I write one. Or pick one and extend it? if the latter: Which one?

If I wrote it it could work as follows:

%HORIZONTALMENU{ options here }%
   * [[#AnchorOne][One]]
   * [[#AnchorTwo][Two]]
   * [[#AnchorThree][Three]]
%ENDHORIZONTALMENU%

Options could be:

• numeric - presenting the menu as 1 | 2 | 3
• alphabetic - presenting the menu as A | B | C
• abbreviated=2 - presenting the menu as On | Tw | Th
• extended - where the plugin accepts the notation [ [#AnchorOne][Ch1:One] ] etc..and renders Ch1 | Ch2 | Ch3 with title=One or Two or Three

Any suggestions on how to proceed?

• Is there a plugin that does this
• is there a plugin that I should extend
• shall I write a new one along the lines above?

---

One is here

Two is here

Three is here

Answer

To render a bullet list as horizontal menu you need to use CSS. There are lots of online sources on this: Google: css "horizontal menu" "bullet list"

-- ArthurClemens - 30 Jan 2009

Thanks Arthur. I know how to do that. But Fowiki renders a bullet as

<li> One </li> 
<li>Two</li>
<li>Three</li>

I believe to do what I want and render the list as a horizontal menu with CSS, the html has to be:

<li alt="One" title="One">1</li>
<li alt="Two" title="Two">2</li>
<li alt="Three" title="Three">2</li>

I believe the translation needs an intervention. I think the intervention should be done by a plugin. Or can I configure this?

Furthermore, I don't like the fact that, without CSS, the menu will revert to a bulleted list, filling up the whole screen. An actual rendering as

<a href="..." alt="One" title="One">1</a> | 
<a href="..." alt="Two" title="Two">2</a> | 
<a href="..." alt="Three" title="Three">2</a>

will leave the menu as a horizontal menu, even when CSS is switched off. So, if I need to write or extend a plugin, I would prefer to go the whole hog.

-- BramVanOosterhout - 30 Jan 2009

I use css for things like this too, but perhaps RenderListPlugin is what you're after?

-- SvenDowideit - 31 Jan 2009

Thanks for the hint Sven. I don't believe RenderListPlugin does what I want.

BTW. Call me stupid, but I could not find a place to download the plugin from the RenderListPlugin page. I expected it to be attached, but I can't see the attachments.

Now I do believe that, if I want to do what I describe, I will need to write it. So I suppose I should move this discussion to development somewhere.

So you can close this call and point me where to continue this discussion please.

I now think it would be logical (sortof) to extend RenderListPlugin

93    if( $type eq "tree" || $type eq "icon" ) {
94        return $thePre . renderIconList( $type, $params, $focus, $depth, $theList );
95    } else {
96        return "$thePre$theList";
97    }

at line 95 with

} elsif ( $type eq "horizontal") { 
   return $thePre . renderHorizontalList( $type, $params, $focus, $depth, $theList );

What do you think?

-- BramVanOosterhout - 30 Jan 2009

I agree with you. I'm hoping that much of the RenderListPlugin functionality will get wrapped into some of the foswiki 1.1 and 2.0 features, but until then, I think your proposed change is a very good idea.

you can move this topic into the Development web and change it to a feature req - and while you're at it, request svn commit access

-- SvenDowideit - 03 Feb 2009

Hi Sven.

I have put the feature request in development at SupportHorizontalMenusThroughRenderListPlugin

I will read about svn access. No idea what it means. I am an interested amateur.

I will install Foswiki (I am to date a TWiki user) and give the development a shot.

Thanks for your encouragement. I have closed the call.

-- BramVanOosterhout - 03 Feb 2009