A long time ago I wrote about my dissatisfaction with drop-down menus. Well, ok, more than dissatisfaction - I hated on them pretty bad! On a recent project, the redesign of Oi Polloi's website, the client had previously used drop-down navigation and initially wanted us to do likewise… uh oh!
Rather than enter into an endless debate on the subject I decided we needed to come up with something better, that would satisfy the client's desire to expose as much of the site structure to shoppers as possible, while remaining far more usable than drop-downs typically allow. We came up with something pretty cool I think, but we don't yet have a cool name for it. The 'drop-bar menu' is about as close as we got!
One of my main gripes with drop-downs is that they tend to cover the content you may have been previously looking at, and this can be annoying and/or disconcerting (depending on the design). They are also particularly bad if they spring open unbidden, as your mouse happens to roll-over a menu item.
Our drop-bar menu does away with both these problems. Firstly, it only activates on a click, meaning the user intended to interact with the menu. Secondly, it doesn't obscure the existing page content, so no disorientating jumps. It does this by gracefully sliding the page content down, keeping it in view all the time and thereby retaining the user's perception of being in the same place.
Finally, it doesn't require the user to have fine mouse control; moving outside the drop-bar area won't cause it to suddenly disappear like some menus do.
This set-up even allowed us to fit in a large, multi-page menu showing all the brands that Oi Polloi stock - and there are lots!
It's not rocket science, but it's usable and simple and devoid of most of the problems associated with drop-downs for navigation.