Open In App

How to Create Scrollable Horizontal Menu using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to implement a Scrollable Horizontal Menu using CSS.

Approach: Scrollable Horizontal Menu is used to scroll the horizontal navbar using CSS “overflow:auto” and “white-space: nowrap”. These two attributes are used to scroll the horizontal menu.

To implement the scrollable horizontal menu

  1. You have to add HTML.
  2. You have to add CSS to the code.

Example: In the below example, we have used CSS properties “overflow : auto” and “white-space : nowrap”. 

HTML




<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <style>
        div.scrollmenu {
          background-color: #333;
          overflow: auto;
          white-space: nowrap;
        }
  
        div.scrollmenu a {
          display: inline-block;
          color: white;
          text-align: center;
          padding: 14px;
          text-decoration: none;
        }
  
        div.scrollmenu a:hover {
          background-color: #777;
        }
    </style>
</head>
<body>
    <center>
       <h1 style="color:green">GeeksforGeeks</h1>
    </center>
    <h2>Horizontal Scrollable Menu</h2>
    <div class="scrollmenu">
      <a href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
      <a href="#support">Support</a>
      <a href="#blog">Blog</a>
      <a href="#tools">Tools</a>  
      <a href="#base">Base</a>
      <a href="#custom">Custom</a>
      <a href="#more">More</a>
      <a href="#logo">Logo</a>
      <a href="#friends">Friends</a>
      <a href="#partners">Partners</a>
      <a href="#people">People</a>
      <a href="#work">Work</a>
    </div>
</body>
</html>


Output:

Scrollable Horizontal Menu



Last Updated : 16 Dec, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads