PmWiki | Cookbook / HorizontalMenu

Summary: Horizontal drop-down style menus

Version:

Prerequisites:

Status: Somewhat outdated

Maintainer: Pm

Categories: Menus

Votes:

Questions answered by this recipe

How can I turn lists into horizontal drop-down style menus, as demonstrated on A List Apart?

Answer

hmenu.php Δ is a script that adds a %hmenu% WikiStyle to PmWiki. This can then be used in a bullet list to produce horizontal drop-down style menus.

Example

* %hmenu% [[Main/Home(Page)]]
* About
** History
** Team
** Offices
* [[Services]]
** Web Design
** Internet Marketing
** Hosting
** Domain Names
** Broadband
* Contact Us
** United Kingdom
** France
** USA
** Australia

Home
About
- History
- Team
- Offices
Services?
- Web Design
- Internet Marketing
- Hosting
- Domain Names
- Broadband
Contact Us
- United Kingdom
- France
- USA
- Australia

Bugs

So far this only works with 2-level lists. It might take a fair amount of work to generalize it to higher-level lists.
- Here is a sample for multi-level menus, see also Cookbook.DropDownSkin Klonk
It does not validate, because type="text/javascript" is missing in the <script> tag
Does not work (expand) in Internet Explorer because of hover issue?

Sandbox

Feel free to experiment with horizontal drop-down style menus below.

Home
Fruits
- BlueBanana
- BadApple
- TheBiggestOrange
Skins
- AccessKeySkin
  - Summary
  - Installation
  - Download
- MarathonSkin
  - Summary
  - Installation
  - Download
- BronwynSkin
  - Summary
  - Installation
  - Download
- BeeblebroxNetGila
- LinesSkin
- DropDownSkin
- JHSkin
- GeminiSkin
- LeanSkin
- SchlaeferTwoSkin
- RecurveSkin
- PhpNetSkin
Search Engines
- Goooogle
  - yahooo
  - I guess you know it...
  - I guess you know it...
    - I guess you know it...
    - I guess you know it...
  - I guess you know it...
- Hayoooo!
  - I bet you used it...
- Clusty...
  - A new user-friendly clustering engine!

-- Isn't this a vertical menu?

-- did you try rolling over the menu with your mouse? --Pm

I'm confused.... how can it be made to display across the top of the page like the example cited at the top of the page?

It doesn't work for me. I'm using it on a SideBar.

-Well, horizontal may not be the right term (more drop-down to me!), but very easy to use. I have even used the next level to add comment (cf the example above) --JCG

- Why this very neat menu does not work in a sidebar ?? --JCG

I realised a multilevel dropdown mneu in SideBar within that skin: Cookbook.DropDownSkin Klonk
For a multilevel menu see following cookbook entry: Multilevel horizontal/vertical menu

Any fixes for IE? --JPH

HorizontalMenu

Questions answered by this recipe

Answer

Example

Bugs

See also

Contributors

Sandbox