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.)

Solution to the ineffective global style of the mini program custom component

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

Function Origin

HTML

CSS

Solution to the ineffective global style of the mini program custom component

MySQL 5.7.16 installation and configuration method graphic tutorial (Ubuntu 16.04)

Solve the problem that the repository and tag names are both none after Docker loads a new image

Simple usage of MySQL temporary tables

vue-element-admin global loading waiting

Some questions about hyperlinks

Install MySQL 5.7.17 in win10 system

Docker build PHP environment tutorial detailed explanation

Tips on disabling IE8 and IE9's compatibility view mode using HTML

Example of implementing hollow triangle arrow and X icon with after pseudo element

Recommend

How to set up virtual directories and configure virtual paths in Tomcat 7.0

Vue+axios sample code for uploading pictures and recognizing faces

Use of LRU algorithm in Vue built-in component keep-alive

Basic usage examples of listeners in Vue

HTML marquee tag usage examples

How to use the vue timeline component

The cloud server uses Baota to build a Python environment and run the Django program

CSS removes the dotted border generated when clicking a link. Compatible with browsers that meet W3C standards

How to extract string elements from non-fixed positions in MySQL

MySQL database Shell import_table data import

A Brief Discussion on the Navigation Window in Iframe Web Pages

Difference between MySQL btree index and hash index

Detailed explanation of MySql view trigger stored procedure

Native JS to implement login box email prompt

HTML Form Tag Tutorial (4):