Teach you step by step how to make the navigation bar at the bottom of your mobile phone, and your boss will agree after reading it

Teach you step by step how to make the navigation bar at the bottom of your mobile phone, and your boss will agree after reading it

Preface

Why does a product need a Tab Bar?
The answer is ease of use, which means that a simple design like the Tab Bar can easily help users navigate to the page.

After understanding the above issues, the next step is to consider how to design the Tab Bar to better meet the user’s needs and experience.

The navigation bar should only contain the most useful information and should not be cluttered with too many useless tags. Many apps add search functionality to the navigation bar as this helps users navigate and retrieve content faster


1. First look at the renderings

2. Step implementation

1. index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>BottomBar</title>
    <link rel="stylesheet" href="index.css" type="text/css">
</head>

<body>
    <div class="container">
        <div class="item active">
            <ion-icon name="home-outline" class="icon"></ion-icon>
            <div class="text">Home</div>
        </div>

        <div class="item">
            <ion-icon name="chatbubble-outline" class="icon"></ion-icon>
            <div class="text">Chat</div>
        </div>

        <div class="item">
            <ion-icon name="camera-outline" class="icon"></ion-icon>
            <div class="text">Camera</div>
        </div>

        <div class="item">
            <ion-icon name="person-outline" class="icon"></ion-icon>
            <div class="text">User</div>
        </div>
        <div class="indicator"></div>
    </div>

    <script>
        const list = document.querySelectorAll('.item')
        function activeLink() {
            list.forEach((item) =>
                item.classList.remove('active'))
            this.classList.add('active')
        }
        list.forEach((item) =>
            item.addEventListener('click', activeLink))
    </script>

    <script type="module" src="ionic.esm.js"></script>
    <script nomodule src="ionic.js"></script>
</body>

</html>

2. index.css

:root {
    --color: #222327
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: var(--color);
}

.container {
    width: 440px;
    height: 70px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    position: relative;
}

.item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100px;
}

.icon {
    position: absolute;
    font-size: 1.7em;
    color: var(--color);
    font-weight: bold;
    transition: 0.5s;
}

.text {
    transform: translateY(20px);
    font-size: 0.75em;
    font-weight: bold;
    transition: 0.5s;
    opacity: 0;
}

.item.active .icon {
    transform: translateY(-32px);
    z-index: 1;
}

.item.active .text {
    opacity: 1;
    transform: translateY(10px);
}

.indicator{
    position: absolute;
    width: 70px;
    height: 70px;
    background: #29fd53;
    left: 35px;
    top: -50%;
    border-radius: 50%;
    border: 6px solid var(--color);
    transition: 0.5s;
}
.indicator::before{
    content: '';
    position: absolute;
    top: 50%;
    left: -22px;
    width: 20px;
    height: 20px;
    background: transparent;
    border-top-right-radius: 20px;
    box-shadow: 0 -10px 0 0 var(--color);
}

.indicator::after{
    content: '';
    position: absolute;
    top: 50%;
    right: -22px;
    width: 20px;
    height: 20px;
    background: transparent;
    border-top-left-radius: 20px;
    box-shadow: 0 -10px 0 0 var(--color);
}

.item:nth-child(1).active ~ .indicator{
    transform: translateX(calc(100px * 0));
}

.item:nth-child(2).active ~ .indicator{
    transform: translateX(calc(100px * 1));
}

.item:nth-child(3).active ~ .indicator{
    transform: translateX(calc(100px * 2));
}

.item:nth-child(4).active ~ .indicator{
    transform: translateX(calc(100px * 3));
}

Because foreign links are introduced in html, access is relatively slow.
So I’ve prepared it for you guys in advance.

3. ionic.esm.js and ionic.js download

Two js file download addresses:https://pan.baidu.com/s/17QHKaF5bZ-WiIr3l1k0-9g?pwd=8888

Effect:

Finish!
Learning source@Douyin unknown developer

Related Posts

Installing third-party firmware on x3-55 letv (by quqi99)

[Ajax] HTTP related issues-GET-POST-XHR usage-ajax in jQuery-cross-domain-same origin-jsonp-cors

[Mini program development]——Encapsulating custom pop-up components

Front-end knowledge – flex layout of css

Android Learning Online Mall (Part 1)

Introduction and use of Normalize.css

[Graphic tutorial to solve the problem of Chinese garbled output in vscode terminal]

Introduction to asynchronous request ajax, native ajax, basic use of $.ajax

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*