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.
HTML
<!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= </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:
Pure CSS Scrollable Horizontal Menu
Example 2:
HTML
<!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= </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:
Pure CSS Scrollable Horizontal Menu
Reference: https://purecss.io/layouts/tucked-menu/
Please Login to comment...