MenusLesson 23Free preview

Horizontal Scroll Menu

This lesson is part of How To · All levels

Summary

This lesson reviews the creation of the Horizontal Scroll Menu. This component is very popular in mobile apps and news sites where navigation category lists can be moved sideways left and right with a finger touch without consuming much screen height.

Key points

Container menus use overflow: auto (or overflow-x: auto)
Apply the white-space property: nowrap on the container so that menu items do not fall to the new line
Each menu link is set to display: inline-block
Supports modern scrollbars that are hidden using scrollbar-width or::-webkit-scrollbar styling

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.