How to create horizontal scrollable sections using CSS ?

How to Create Scrollable Horizontal Menu using CSS?

Last Updated : 08 Nov, 2024

The scrollable horizontal menu is suitable for various screen sizes. To create a scrollable horizontal menu using CSS, you can make use of the overflow property on a container.

Syntax

white-space: nowrap
overflow: auto;

HTML

<!DOCTYPE html>
<html>

<head>
    <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>
    <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>
        <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

How to create horizontal scrollable sections using CSS ?

A

attardeurjita77

Improve

Article Tags :

Similar Reads

How to Create Scrollable Horizontal Menu using CSS ?

The scrollable horizontal menu is suitable for various screen sizes. To create a scrollable horizontal menu using CSS, you can make use of the overflow property on a container. Syntax white-space: nowrapoverflow: auto;[GFGTABS] HTML <!DOCTYPE html> <html> <head> <style> div.s

How to create horizontal scrollable sections using CSS ?

In this article, we will see how we can create a horizontal scrollable section using CSS. We are going to make different sections and make them horizontally scrollable using CSS. HTML code is used to create the basic structure of the sections and CSS code is used to set the style. HTML Code: In this

How to create Horizontal Scroll Snap Using HTML and CSS ?

In this project, we are going to create a simple Horizontal Scroll Snap by using HTML and CSS only. Glimpse of Project Approach: The best way to animate the HTML objects is by using CSS classes and by setting the transitions at different stages. HTML code:Create an HTML file (index.html).Link the CS

Make a Div Horizontally Scrollable using CSS

Here are two different methods to make the div horizontal scrollable using CSS. 1. Using overflow-x and overflow-y PropertiesFor a horizontal scrollable bar, we can use the x and y-axis. Set the overflow-y: hidden; and overflow-x: auto; which will automatically hide the vertical scroll bar and prese

How to create an image gallery with a horizontal scrollbar using CSS ?

In this article, we will learn how to create an image gallery with a horizontal scrollbar using CSS. It provides a way to navigate through a set of images, on scroll horizontally to view different pictures. This effect is helpful when space optimization of the web page is a concern that efficiently

How to Create an Image Gallery with a Horizontal Scrollbar using CSS?

Image galleries are essential tools for showcasing multiple images within a single container on a website. They allow users to view a collection of images in an organized way. When we use the horizontal scrollbar, then we can reduce the space. In this tutorial, we will go through the steps on how to

How to create a custom scrollbar using CSS ?

Scrollbars are common graphical user interface elements that allow users to navigate content beyond the visible area. By default, web browsers provide basic scrollbars with a predefined style. However, using HTML and CSS, you can customize the scrollbar to match your website's design better. Scrollb

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

How to Add Horizontal Scroll Bar in HTML Table?

When working with tables that have a lot of columns or when the content inside the cells is too wide to fit within the viewport, it is frequently necessary to add a horizontal scroll bar to an HTML table. This ensures that the table maintains its usability and readability without affecting the webpa

How to create a Menu Icon using CSS ?

The Menu Icon is mostly used on smaller screens, there's limited space to display a full navigation menu. A menu icon helps in hiding the navigation items initially and revealing them when the user needs them. In this article, we will see how To Create a Menu Icon using CSS. There are many ways to c