How to Create a Horizontal Scrollable Menu Using HTML and CSS

Introduction

A horizontal scrollable menu is ideal for displaying many navigation items in a compact space. Instead of wrapping items to the next line, users can scroll horizontally to access all items. This is particularly useful for mobile-responsive menus or category navigation.

In this tutorial, we will create a horizontal scrollable menu using HTML and CSS. We will also include optional JavaScript to add smooth scrolling functionality for an enhanced user experience.

Development Steps

Create the HTML Structure: Build the structure of the horizontal menu using HTML.
Style the Menu Using CSS: Apply CSS to make the menu scrollable and visually appealing.
Add Overflow Scrolling for Horizontal Layout: Ensure that the menu is horizontally scrollable with a visible scrollbar.
Add JavaScript for Smooth Scrolling (Optional): Implement optional smooth scrolling with JavaScript.

Step 1: Create the HTML Structure

We will start by creating the HTML structure for the horizontal scrollable menu. Each navigation item will be represented by an <a> element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Scrollable Menu</title>
</head>
<body>

    <!-- Step 1: Horizontal menu structure -->
    <div class="menu">
        <a href="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#about">About</a>
        <a href="#blog">Blog</a>
        <a href="#portfolio">Portfolio</a>
        <a href="#contact">Contact</a>
        <a href="#faq">FAQ</a>
        <a href="#team">Team</a>
        <a href="#gallery">Gallery</a>
        <a href="#testimonials">Testimonials</a>
        <a href="#careers">Careers</a>
    </div>

</body>
</html>

Explanation:

The menu items are wrapped inside a <div> with the class menu.
Each item is represented by an <a> tag, linking to different sections or pages.

We will now apply CSS to style the menu and enable horizontal scrolling.

<style>
    /* Step 2: Basic styles for the menu */
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }

    .menu {
        display: flex; /* Use flexbox to arrange items horizontally */
        overflow-x: auto; /* Enable horizontal scrolling */
        white-space: nowrap; /* Prevent items from wrapping to the next line */
        background-color: #333; /* Set background color */
        padding: 10px 0; /* Add padding for visual spacing */
    }

    /* Menu item styles */
    .menu a {
        display: inline-block;
        color: white;
        padding: 14px 20px;
        text-decoration: none;
        font-size: 16px;
        text-align: center;
        white-space: nowrap; /* Ensure text doesn't wrap */
    }

    .menu a:hover {
        background-color: #575757; /* Add hover effect */
    }

    /* Hide the scrollbar for WebKit browsers (e.g., Chrome, Safari) */
    .menu::-webkit-scrollbar {
        display: none;
    }

    /* Optional: Scrollbar width for Firefox */
    .menu {
        scrollbar-width: thin;
    }
</style>

Explanation:

The .menu class uses display: flex to arrange the menu items in a horizontal line. The overflow-x: auto enables horizontal scrolling when the items overflow the viewport.
Menu items are given padding, color, and a hover effect for visual appeal.
white-space: nowrap ensures that text remains on a single line, and the ::-webkit-scrollbar property hides the scrollbar in WebKit browsers.

Step 3: Add Overflow Scrolling for Horizontal Layout

To ensure that the menu scrolls horizontally, we have already used overflow-x: auto in the CSS above. However, let’s ensure the menu works well on smaller screens by making it responsive.

<style>
    /* Step 3: Responsive styles */
    @media screen and (max-width: 600px) {
        .menu a {
            padding: 10px 15px; /* Adjust padding for smaller screens */
            font-size: 14px; /* Reduce font size for better fit */
        }
    }
</style>

Explanation:

The media query adjusts the padding and font size for smaller screens, ensuring that the menu items are still readable but take up less space.

Step 4: Add JavaScript for Smooth Scrolling (Optional)

For an enhanced user experience, you can add smooth horizontal scrolling using JavaScript. This step is optional but provides a more polished feel when scrolling through the menu.

<script>
    // Optional: Smooth scrolling for the horizontal menu
    document.querySelector('.menu').addEventListener('wheel', function(event) {
        if (event.deltaY > 0) {
            this.scrollLeft += 100;  // Scroll right
        } else {
            this.scrollLeft -= 100;  // Scroll left
        }
        event.preventDefault();  // Prevent default vertical scrolling
    });
</script>

Explanation:

The wheel event listener is used to detect when the user scrolls with the mouse wheel.
If the user scrolls down (deltaY > 0), the menu scrolls right. If the user scrolls up, the menu scrolls left.
The event.preventDefault() method prevents the default vertical scroll behavior.

Complete Code

Here’s the complete code for the horizontal scrollable menu:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Scrollable Menu</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* Horizontal menu styles */
        .menu {
            display: flex;
            overflow-x: auto; /* Enable horizontal scrolling */
            white-space: nowrap; /* Prevent items from wrapping */
            background-color: #333;
            padding: 10px 0;
            scrollbar-width: thin; /* Firefox: make scrollbar thin */
        }

        /* Menu item styles */
        .menu a {
            display: inline-block;
            color: white;
            padding: 14px 20px;
            text-decoration: none;
            font-size: 16px;
            text-align: center;
        }

        /* Hover effect for menu items */
        .menu a:hover {
            background-color: #575757;
        }

        /* Hide scrollbar for WebKit browsers (Chrome, Safari) */
        .menu::-webkit-scrollbar {
            display: none;
        }

        /* Responsive styles */
        @media screen and (max-width: 600px) {
            .menu a {
                padding: 10px 15px;
                font-size: 14px;
            }
        }
    </style>
</head>
<body>

    <!-- Horizontal scrollable menu -->
    <div class="menu">
        <a href="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#about">About</a>
        <a href="#blog">Blog</a>
        <a href="#portfolio">Portfolio</a>
        <a href="#contact">Contact</a>
        <a href="#faq">FAQ</a>
        <a href="#team">Team</a>
        <a href="#gallery">Gallery</a>
        <a href="#testimonials">Testimonials</a>
        <a href="#careers">Careers</a>
    </div>

    <!-- Page content -->
    <div style="padding: 20px;">
        <h2>Page Content</h2>
        <p>This is the main content of the page.</p>
    </div>

    <!-- Optional: Smooth scrolling for the horizontal menu -->
    <script>
        document.querySelector('.menu').addEventListener('wheel', function(event) {
            if (event.deltaY > 0) {
                this.scrollLeft += 100;  // Scroll right
            } else {
                this.scrollLeft -= 100;  // Scroll left
            }
            event.preventDefault();  // Prevent default vertical scrolling
        });
    </script>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Conclusion

In this tutorial, we created a simple yet effective horizontal scrollable menu using HTML and CSS. The menu is responsive and adjusts well on smaller screens. We also added smooth scrolling functionality using JavaScript, which is optional but enhances the user experience.

This type of menu is perfect for websites that need to display multiple categories, links, or content in a compact space. Let me know if you have any questions or need further customization!

Java Guides

Search This Blog