Scrolling Menus

David's picture

Recently my brother came to me with some issues he was having with dropdown menu. He was using a standard un-ordered list to organize the links but he had so many links that he needed to make sub-and sub-sub-menus scroll. One approach that was explained by Chris Coyier back in 2009 (http://css-tricks.com/long-dropdowns-solution/) was to hide part of the menu via overflow and then scroll the menu with JavaScript. This works nicely for a single menu with scroll but if you have a menu that scrolls with a sub-menu that scrolls the clipping of the parent will clip the sub-menu. You end up seeing something like below.

Now over all I thinking this is entirely a bad user experience which ends up with something bad like the “Windows Start Menu”. Menus within menus of scrolling options need to be restructured into a more logical simpler user experience. Anyway, the solution I came up with is to show and hide menu items depending on the mouse location instead of scrolling the contents within the block. My solution works OK but depending on the math some items are hard to click. If I really had need to perfect this script I would adjust it to only modify the list display if your mouse was touching a button at the top or bottom of the list. I saw this approach in the Chrome when you have too many bookmarks to display on the screen.

Overall I just wanted to post this imperfect demo in case anyone is in need of developing a similar solution.

See the Pen Scroll Drop Menu by David Ross (@sharperconcepts) on CodePen.