Open Source Resources for Web Application Developers

Shopify - Online Store Builder
Follow Us on Social Sites
Subscribe RSS Subscribe Newsletter Like us on Facebook Follow us on Twitter Follow us on Google+
  • Home
  • News
  • Plugins
  • Design
  • Others
  • Books
  • About
23 Oct

Accessible Very Tall Menus with jQuery and CSS

  • License Free, Menu
  • Leave a Comment

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

Share
Tweet
Sponsors
subscribe to our newsletter - weekly free resouces for web developers
follow us on social sites - rss, facebook, google+, Twitter
Subscribe RSS Like us on Facebook Follow us on Twitter Follow us on Google+
Related Resources
Create an Amazon-like Navigation Menu with jQuery

Create an Amazon-like Navigation Menu with jQuery

Mac-like Multi-level Dropdown Menu with CSS3

Mac-like Multi-level Dropdown Menu with CSS3

How to Create Collapsible Tree Menu with Pure CSS

How to Create Collapsible Tree Menu with Pure CSS

How to Create a Gallery with Scrollable Thumbnails

How to Create a Gallery with Scrollable Thumbnails

Accessible News Slider Plugin Built for jQuery

Accessible News Slider Plugin Built for jQuery

How to Create a Slick Animated Content Menu with jQuery

How to Create a Slick Animated Content Menu with jQuery

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…..

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact

Sponsors
Advertise Here
Search
By Keywords
30 Days / All Time
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • Professional Business Cards Made By Designers
  • Best Free Chrome Extensions for Web Developers
  • All of the Best Free WordPress Themes You Need
  • How to Create a Web App Admin User Interface
  • Nice List of Open Source Fish Eye Menu
  • Best Web Admin Templates
  • 25 Useful Blogs for Web Design & Development
  • Simple Javascript Progress Bar with CSS
  • 10 Useful & Quality Design Resources
  • Free Web Application Icons
  • How to Create High-Performance Code
  • Easy to Use, Drag & Drop Bootstrap Interface Builder
  • The Most Well-Made, Free & Open Source Fonts
  • Tiny Responsive jQuery Slider without Fancy Effects
  • How to Create Realtime Multi-player Games in HTML5
  • Create an Amazon-like Navigation Menu with jQuery
  • A True Responsive jQuery Lightbox Plugin for Free
  • How to Make FullScreen Page Transitions with CSS
  • How to Use Web Workers for Image Manipulation
  • Pretty Neat jQuery Mobile Theme Based on Flat UI
Sponsors
Plugins
  • Advertisement15
  • Calendar47
  • Capture19
  • Charts55
  • Chat22
  • Demo Tour16
  • Gallery121
  • Maps30
  • Menu86
  • Polls9
  • Popup49
  • Tooltips42
  • Upload33
  • Video18
Desgin
  • Brushes11
  • Buttons25
  • Color Schemes24
  • Fonts47
  • Forms112
  • Icons108
  • Patterns24
  • PS Tutorials15
  • Stock Photos21
  • Tables25
Others
  • Announcement103
  • Best Collections6
  • Code54
  • eCommerce24
  • Framework214
  • Hosting13
  • Information238
  • Inspiration32
  • Legal Documents10
  • Reviews8
  • Security13
  • Social28
  • Sound16
  • Stats39
  • Tools293
  • Webmail14
Licesnes
  • BSD License67
  • CC License122
  • GPL License224
  • LGPL License40
  • License Free738
  • MIT License408
Sponsors
Advertise Here
Partners
NetDNA