移动小球导航栏

今天分享一个滑动小球导航栏效果。这是我从西瓜视频上看到的原地址：使用HTML+JS+CSS实现一个神奇导航菜单指示器，我自己实现了一遍并在此记录一下。

效果展示

移动小球导航栏

HTML&CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./icon/iconfont.css">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Popoins', sans-serif;
        }

        :root {
            --bg: #222327;
        }

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

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

        .navigation ul {
            position: relative;
            list-style: none;
            display: flex;
            width: 350px;
        }

        .navigation ul li {
            width: 70px;
            height: 70px;
            position: relative;
            z-index: 1;
            cursor: pointer;
        }

        .navigation ul li a {
            position: relative;
            text-decoration: none;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            text-align: center;
            font-weight: 500;
        }

        .navigation ul li a .icon{
            display: block;
            line-height: 75px;
            font-size: 1.5em;
            text-align: center;
            transition: .5s;
            color: var(--bg);
        }

        .navigation ul li.active a .icon{
            transform: translateY(-35px);
        }

        .navigation ul li a .text{
            position: absolute;
            color: var(--bg);
            font-weight: 400;
            font-size: .75em;
            letter-spacing: .05em;
            transition: .5s;
            opacity: 0;
            transform: translateY(20px);
        }

        .navigation ul li.active a .text{
            opacity: 1;
            transform: translateY(10px);
        }

        .indicator{
            position: absolute;
            left: 0;
            top: -50%;
            width: 70px;
            height: 70px;
            background-color: #29fd53;
            border-radius: 50%;
            border: 6px solid var(--bg);
            transition: .5s;
        }

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

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

        .navigation ul li:nth-child(1).active ~ .indicator{
            transform: translateX(calc(70px * 0));
        }

        .navigation ul li:nth-child(2).active ~ .indicator{
            transform: translateX(calc(70px * 1));
        }

        .navigation ul li:nth-child(3).active ~ .indicator{
            transform: translateX(calc(70px * 2));
        }

        .navigation ul li:nth-child(4).active ~ .indicator{
            transform: translateX(calc(70px * 3));
        }

        .navigation ul li:nth-child(5).active ~ .indicator{
            transform: translateX(calc(70px * 4));
        }
    </style>
</head>
<body>
<div class="navigation">
    <ul>
        <li class="active"><a><span class="icon iconfont icon-home"></span><span class="text">Home</span></a></li>
        <li><a><span class="icon iconfont icon-nickname"></span><span class="text">Profile</span></a></li>
        <li><a><span class="icon iconfont icon-voice"></span><span class="text">Message</span></a></li>
        <li><a><span class="icon iconfont icon-camera"></span><span class="text">Photos</span></a></li>
        <li><a><span class="icon iconfont icon-settings"></span><span class="text">Settings</span></a></li>
        <div class="indicator"></div>
    </ul>
</div>
</body>
</html>

JS

const list = document.querySelectorAll(".navigation ul li");

function activeLink(){
    list.forEach(item =>{
        item.classList.remove('active')
        this.classList.add('active')
    })
}

list.forEach(item =>{
    item.addEventListener('click',activeLink)
})

总结

这个效果里，最有意思的是用两个伪元素设置边框阴影来模拟大盒子的圆角。挺精巧的。

移动小球导航栏
https://www.zhaojun.inkhttps://www.zhaojun.ink/archives/move-ball-nav
作者
卑微幻想家
发布于
2022-10-17
许可协议