Hacker News new | past | comments | ask | show | jobs | submit login

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




Airbnb comes to mind, they added left and right arrows to their tabs. https://imgur.com/a/MXDabnS


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


That'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


Now your menu requires JS though, which isn't ideal, especially on a brochure site that could work perfectly well without it.


You can edit ::-webkit-scrollbar to always show it - https://codepen.io/jdsampayo/pen/zYprwao

Not a fan but could be forced if needed.

Based on - https://stackoverflow.com/a/7855592/1342097




Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: