The drop-bar menu

Written by Jamie Freeman

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.

a comparison between drop-down and drop-bar menus

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!

And fear not, of course we've built in a simple, usable JavaScript-disabled version too. In fact, the JavaScript simply enhances the semantically correct and simple HTML to enable the fancy-pants interactivity.

It's not rocket science, but it's usable and simple and devoid of most of the problems associated with drop-downs for navigation.

Comments

  • James Seymour-Lock -

    Great to see some more blog posts from Message!

    nice idea for the drop down menu, sure does make everything a lot easier to use, although im a fan of avoiding drop down menu's all together.

    -J

  • Jamie Freeman -

    Us too, but short of a best of five arm wrestle with a client we occasionally have to come to a compromise ;-)

  • Glenn -

    It looks nice, except that none of the words in the menus are visible in Chrome on OS X. rnrnI'm also a little iffy about shifting content. But it does work nicely. rnrnWe are so used to dropdown menus in the applications we use that it makes to create that in our websites.

  • Jamie Freeman -

    Hey Glenn, thanks. Not sure which OSX Chrome you're using but I see it all perfectly on the versions we have running here. Be great if you would email your version numbers :-)

    As for applications, I think that's a different use-case. Well, it is a different use-case… In the article I originally wrote on drop-downs for navigation I said:

    "You'll notice, too, that those menus at the top of your OS window are not generally for navigating but for performing actions, which is quite a different thing."

    I still think that holds, but I appreciate the boundaries may get blurry as time moves on; especially with some websites effectively being applications…

  • paul -

    now thats a cool menu!

Any questions? Please get in touch…

We'd love to talk to you about your web project, e-commerce, EPOS system or bespoke web application.

Message Digital Design Ltd

+44 (0)1273 772247

© Message Digital Design Ltd. 2017