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 =
</ 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 =
</ 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://purecss.io/layouts/tucked-menu/