WebAppers

/ best free open source web resources /

Shopify

Accessible Very Tall Menus with jQuery and CSS

Posted · Category: License Free, Menu

The problem with long dropdowns is that the dropdown itself can go below the fold of the website. That is, below the visible area of the browser window. So in order to access those menu items down below, you need to scroll your browser window.

For those of us with scroll wheels of some kind on our mouses, it’s not a big deal. For those without, those lower menu items are totally inaccessible, because to use the browser scrollbar means mousing off the menu and probably having it close.

CSS Tricks has come up with a Solution For Very Long Dropdown Menus, and tell us how to implement a technique where as you scroll down, the menu actually moved in an accelerated fashion. Therefore the menu can be accessible even the user has no scroll wheels on his mouse.

css-tall-menu

Requirements: jQuery Framework
Demo: http://css-tricks.com/examples/LongDropdowns/
License: License Free

7 Comments
  • http://kylefox.ca Kyle Fox

    Personally I think this is a gross solution.

    If your dropdowns are extending beyond the fold, you should consider re-thinking your information architecture, not coming up with ways to make a mile-long list of links scrollable.

  • Brad

    Me no like, to much for the common user to grasp.

  • http://www.hello-news.com hello News

    Good , will test it
    and good for free license .
    Thank you

  • plasmo

    yeah not a big fan of this as well
    not a very good way to present information
    because the user cannot see everything on the menu in 1 go

  • http://www.webgrafismo.com Pedro Magalhães

    There was a MIT menu similiar to this, but much better.
    This menu isn’t that great… But thanks for sharing it.

  • http://www.sedat.web.tr Sedat Kumcu

    Thanks for this great sample.

  • http://www.mybbgrup.com mybb

    Thanks…..

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons