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

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

Function Origin

HTML

CSS

JavaScript Basics Variables

Vue project @change multiple parameters to pass multiple events

Nexus uses API to operate

Detailed explanation of non-primary key column overflow monitoring in MySQL tables

Detailed process of installing and configuring MySQL and Navicat prenium

CSS method of clearing float and BFC

Detailed explanation of Javascript Echarts air quality map effect

Alibaba Cloud Server Tomcat cannot be accessed

mysql uses stored procedures to implement tree node acquisition method

Native js to implement drop-down menu

Recommend

nuxt.js multiple environment variable configuration

Web Standard Application: Redesign of Tencent QQ Home Page

Detailed explanation of js's event loop event queue in the browser

Detailed explanation of CSS3 text shadow text-shadow property

Implementation of code optimization for Vue2.x project performance optimization

Installation tutorial of mysql8.0rpm on centos7

10 very good CSS skills collection and sharing

Building command line applications with JavaScript

Use render function to encapsulate highly scalable components

Record of the actual process of packaging and deployment of Vue project

HTML Tutorial: Collection of commonly used HTML tags (5)

Linux performance monitoring tool nmon installation and usage tutorial analysis

Two ways to manually implement MySQL dual-machine hot standby on Alibaba Cloud Server

When the interviewer asked the difference between char and varchar in mysql

How to quickly import data into MySQL