Version 8 (modified by lemon-head, 11 years ago) (diff)


Page Layout with Navigation Sidebar

See also

In an attempt to simplify the BW layout and reduce the domination of the big orange teaser, while still providing all essential navigation elements, we think of a navigation menu with dropdown submenus as one possible solution. Such menus can be implemented with CSS or JS, or a combination of both.


  • efficient use of display space.


  • items in the dropdown are not visible in the first place
  • problems in IE6 with js switched off.
  • easily pops out unintended, then it hides other page elements. Special attention in the design!
  • Often a dropdown does not look like anything will pop up. Consider visual affordances in the design!

What would go in the submenus?

  • personal links (messages, profile, preferences etc)
  • community links
  • search (with options) - not necessarily as a dropdown, but as part of the menu)
  • help / about / feedback
  • admin ("volunteer") links


What is so great about dropdown menus? If IE6 might have problems, what about users with old computers or very compact ones (pocket pcs)? --sitarane (Julien)

Hmm. I also think JS for dropdowns is no good idea in general. While pure CSS may work from a security point of view, I'd expect trouble with old and mobile browsers. (If we should care about IE6 at all - I won't - could be a topic elsewhere) --midsch

The idea is to have both js and css. This way, people with older browser that don't support CSS dropdowns still have the javascript, while people with js deactivated on newer browsers still have the CSS. Only old browser + javascript deactivated will suffer from not seeing the beautiful dropdown, and for these we provide slower alternative navigation paths. This is the usual way these dropdowns are used on other sites. -- lemonhead


About pocket pcs, you have a point. I really don't know how well a css or javascript dropdown works there, so it is important to have the alternative navigation working. On the other hand, it is also important not to waste too much space, especially on these small-screen devices!

-- lemonhead