Open In App

Pure CSS Scrollable Horizontal Menu

Improve
Improve
Like Article
Like
Save
Share
Report

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

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

Pure CSS Scrollable Horizontal Menu

Reference: https://purecss.io/layouts/tucked-menu/



Last Updated : 04 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads