4 ms·
Clear menus that aren't hidden away are great, but a significant problem with horizontal 'sausage' menus is that it isn't obvious that you can scroll, especiall
by onion2k 5y ago
Clear menus that aren't hidden away are great, but a significant problem with horizontal 'sausage' menus is that it isn't obvious that you can scroll, especially on Apple devices that hide scrollbars. The article mentions this as a bit of an after-thought ("Without proper fade / cut off visual cues, users may not understand they can scroll") but it's the key reason why you should avoid them.
To demonstrate, I've forked the example and set the main element to 625px wide instead of 600px - https://codepen.io/onion2k/pen/mdpVWmr https://codepen.io/onion2k/pen/mdpVWmr
- jdsampayo 5y agoYou can edit ::-webkit-scrollbar to always show it - https://codepen.io/jdsampayo/pen/zYprwao https://codepen.io/jdsampayo/pen/zYprwao Not a fan but could be forced if needed. Based on - https://stackoverflow.com/a/7855592/1342097 https://stackoverflow.com/a/7855592/1342097
- josho 5y agoThat's solved by adjusting the scroll starting position so that the first element is partially offscreen. It may initially look jarring, like the designer made a mistake but it provides a nice visual affordance that you can scroll and it will work regardless of the screen width. https://codepen.io/blipo/pen/Rwxrgpd https://codepen.io/blipo/pen/Rwxrgpd
- onion2k 5y agoNow your menu requires JS though, which isn't ideal, especially on a brochure site that could work perfectly well without it.
- ddlutz 5y agoYeah it took me several minutes to figure out how to scroll on a macbook because there is no visible scrollsbar, to hit right arrow, and then the scroll bar appeared. I couldn't click and drag it.
- davidspiess 5y agoAirbnb comes to mind, they added left and right arrows to their tabs. https://imgur.com/a/MXDabnS https://imgur.com/a/MXDabnS