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

HorizontalMenu

Questions answered by this recipe

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

Answer

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]]

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?
• I can expand the menu in IE7, and but you can only can mouse-over the first menu selection. As soon as you go below it for the next option, the whole menu vanishes. Any fixes? -Jason

See also

• Nick Rigby, Drop-Down Menus, Horizontal Style
• PmWiki.WikiStyles

Contributors

• Pm (from an idea by Benfay?)

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?

sb

-- 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?

BM

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