CSS implements horizontal scrolling navigation bar on mobile devices (also applicable to PC devices)

Function Origin

I was recently working on an H5 that required a horizontal scroll bar. After reading some documents, I finally decided to write one myself, one that is compatible with both Mobile and PC.

HTML

<body>
    <div class="nav">
        <a href="#">Nav1</a>
        <a href="#">Nav2</a>
        <a href="#">Nav3</a>
        <a href="#">Nav4</a>
        <a href="#">Nav5</a>
        <a href="#">Nav6</a>
        <a href="#">Nav7</a>
        <a href="#">Nav8</a>
        <a href="#">Nav9</a>
        <a href="#">Nav10</a>
        <a href="#">Nav11</a>
        <a href="#">Nav12</a>
        <a href="#">Nav13</a>
        <a href="#">Nav14</a>
        <a href="#">Nav15</a>
    </div>
    <div>
        Content area</div>
</body>

CSS

.nav {
    width: 100%;
    height: 50px;
    line-height: 50px;
    /*No line breaks in paragraphs*/
    white-space: nowrap;
    /*shadow*/
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    /*Set horizontal scrolling*/
    overflow-x: scroll;
    /*Disable vertical scrolling*/
    overflow-y: hidden;
    /*Text tiling*/
    text-align: justify;
    /*Background color*/
    background: #F4F5F6;
    padding: 0px 5px;
    margin-bottom: 10px;
    /*Set the margin change effect to indent*/
    box-sizing: border-box;
}
.nav a {
    color: #505050;
    /*Cancel the underline of the hyperlink*/
    text-decoration: none;
    margin: auto 10px;
}
.nav::-webkit-scrollbar {
    /*Hide scrollbar*/
    display: none;
}

This way, we can achieve horizontal scrolling navigation. Isn’t it very simple?

This concludes this article about how to use CSS to implement a horizontal scrolling navigation bar on mobile devices (also applicable to PC). For more information about CSS horizontal scrolling navigation bars, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: Example code of html formatting json

>>: Special effects of Bootstrap 3.0 study notes (display and hide, eliminate floating, close button, etc.)

Implementation of Element-ui Layout (Row and Col components)

CSS implements horizontal scrolling navigation bar on mobile devices (also applicable to PC devices)

Function Origin

HTML

CSS

Implementation of Element-ui Layout (Row and Col components)

Introduction to the steps of deploying redis in docker container

Tomcat configuration and how to start it in Eclipse

Sharing the structure and expression principles of simple web page layout

HTML blockquote tag usage and beautification

IE conditional comments for XHTML

CSS to achieve the image hovering mouse folding effect

nginx solves the problem of slow image display and incomplete download

Oracle deployment tutorial in Linux environment

Ten popular rules for interface design

Recommend

JavaScript to achieve simple drag effect

A brief talk on responsive design

Detailed installation tutorial of mysql 5.7 under CentOS 6 and 7

Summary of xhtml block level tags

vue-element-admin global loading waiting

Implementation of Nginx forwarding matching rules

How to monitor multiple JVM processes in Zabbix

Discussion on image path issues in css (same package/different package)

Implementation of Docker deployment of Nuxt.js project

Several methods for js to determine the horizontal and vertical screen viewport detection of mobile terminals

JavaScript simulation calculator

Summary of Linux ps and pstree command knowledge points

Detailed explanation of compatibility issues and solutions for setting max-width and min-width in table

Solve the problem of combining AND and OR in MySQL

The new version of Chrome browser settings allows cross-domain implementation