How To Create a Horizontal Scrolling Menu

The answer is much simple than you thought.

The basic idea - 

- A container or a wrapper (parent )

- Inside the container, nav-items (children)

We will learn to create our horizontal scrolling navigation in two different ways.

  1. Simple and basic HTML,
  2. CSS Flexbox

Here is the working demo - 

Method 1: Simple and basic HTML

Step 1: Create the main nav container and nav-items.

<div class="hr-nav-1">
    <h2>Simple and basic HTML</h2>
    <nav class="nav-container">
        <a href="#!" class="nav-item">Latest</a>
        <a href="#!" class="nav-item">Trending</a>
        <a href="#!" class="nav-item">Featured</a>
        <a href="#!" class="nav-item">All Posts</a>
        <a href="#!" class="nav-item">React</a>
        <a href="#!" class="nav-item">Angular</a>
        <a href="#!" class="nav-item">Vuejs</a>
        <a href="#!" class="nav-item">Meteor</a>
        <a href="#!" class="nav-item">Machine Learning</a>
        <a href="#!" class="nav-item">Categories</a>
        <a href="#!" class="nav-item">Tags</a>
        <a href="#!" class="nav-item">My Account</a>
    </nav>
</div>

 

Step 2: Add style to scroll horizontally

.hr-nav-1 .nav-container {
    overflow: auto;
    white-space: nowrap;
    overflow-x: auto;

    max-width: 48em;
    margin: 1rem auto;
    background-color: #2a2a72;
    background-image: linear-gradient(315deg, #2a2a72 0%, #009ffd 74%);
    text-align: center;
}

.hr-nav-1 .nav-item {
    display: inline-block;
 
    padding: 8px 10px;
    text-decoration: none;
    color: #fff;
}

This is simplest way to create a horizontal scrolling menu. Next, we will create the same navigation using the CSS flexbox method.

Method 2: CSS Flexbox 

Step 1: The navigation markup

In this method, our HTML markup remains the same as in the first method. The only difference is that we have added a new class to the container.

<div class="hr-nav-2"> <!-- Class hr-nav-2-->
    <h2>CSS Flexbox</h2>
    <nav class="nav-container style-3">
        <a href="#!" class="nav-item">Latest</a>
        ...
        ...
        <a href="#!" class="nav-item">My Account</a>
    </nav>
</div>

 

Step 2: Add CSS flex properties to scroll horizontally

.hr-nav-2 .nav-container {
   display: flex;
   overflow-x: auto;
   align-items: center;

   max-width: 48em;
   margin: 1rem auto;
   background-color: #7f53ac;
   background-image: linear-gradient(315deg, #7f53ac 0%, #647dee 74%);

}

.hr-nav-2 .nav-item {
   flex: 0 0 auto;
   padding: 8px 10px;
   margin-right: 1rem;
   text-decoration: none;
   color: #fff;
}

Cool. As we see, both of these methods can be used to create horizontal scrolling navigation.

Besides creating navigation, this can be used to create any type of horizontal scrolling UI. For example, we can create a product slider, card slider, etc.

#Code Snippets #CSS #CSS3 #HTML