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.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure CSS Scrollable horizontal Menu</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
href=
"https://unpkg.com/purecss@2.0.6/build/pure-min.css">
</head>
<body>
<div class="pure-menu pure-menu-horizontal pure-menu-scrollable">
<ul class="pure-menu-list">
<li class="pure-menu-heading">
<a href="#" class="pure-menu-link">
GeeksforGeeks
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link"
>Data Structures
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Algorithms
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Interview Preparation
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Topic-wise Practice
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
C++
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Java
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Python
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Competitive Programming
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Machine Learning
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Web Development
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Puzzles
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Project Ideas
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
GFG School
</a>
</li>
</ul>
</div>
</body>
</html>
Output:
Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure CSS Scrollable horizontal Menu</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
href=
"https://unpkg.com/purecss@2.0.6/build/pure-min.css">
</head>
<body>
<div class="pure-menu pure-menu-horizontal pure-menu-scrollable">
<ul class="pure-menu-list">
<li class="pure-menu-heading">
<a href="#" class="pure-menu-link">
GeeksforGeeks
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link"
>Data Structures
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Algorithms
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Interview Preparation
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Topic-wise Practice
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
C++
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Java
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Python
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Competitive Programming
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Machine Learning
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Web Development
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Puzzles
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Project Ideas
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
GFG School
</a>
</li>
</ul>
</div>
</body>
</html>
Output:
Reference: https://pure-css.github.io/