Pure CSS Scrollable Horizontal Menu

When there isn't enough room, the scrollable horizontal menu items can be used. It gives responsiveness to the web pages. 

To create a scrollable horizontal menu, add the pure-menu-scrollable class. Pure.CSS provides vertical menus by default. You can change the vertical menu to a horizontal menu by adding the class name pure-menu-horizontal dropdown menus that are not supported in the scrollable horizontal menu. 

Pure CSS Scrollable Horizontal Menu class:

• pure-menu-scrollable: This class is used to create a scrollable horizontal menu.

Syntax:

<div class="pure-menu pure-menu-scrollable">
 ...
</div>

Example 1: The following code demonstrates the scrollable dropdown menu using the above classes.

Output:

👁 Pure CSS Scrollable Horizontal Menu

Example 2:

Output:

👁 Pure CSS Scrollable Horizontal Menu

Reference: https://pure-css.github.io/