Version 9 (modified by micha, 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

While I admit that dropdowns are in general problematic for the ones that can't use them (JS deactivated) I agree with lemonhead that a solution like on already is quite close to full accessibility. Another way to not "loose" the ones without JS and modern CSS is to provide summary pages from where you get to all the sub-content. E.g: A click on "Members" should lead to a page from which you can jump to subpages like the Membersearch, the Country-app, the groups. It's a simple solution, yet it works.

I don't see a good alternative to the dropdowns if we want to keep a clean layout. Let's review our menu-structure constantly, then this could really help a lot. Furthermore, I'm also for marking wether a link opens a dropdown or not. For an example see when you're logged in. The dropdown-links have a triangle next to them.

-- Micha