动画菜单栏指示器

最新推荐文章于 2023-02-15 12:24:21 发布

云处安

最新推荐文章于 2023-02-15 12:24:21 发布

阅读量169

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_36575358/article/details/103183807

版权

HTML 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @import url("https://fonts.googleapis.com/css?family=DM+Sans:500,700&display=swap");
        * {
            box-sizing: border-box;
        }

        body {
            text-align: center;
            display: flex;
            height: 100vh;
            width: 100%;
            justify-content: center;
            align-items: center;
            padding: 0 20px;background-color: #232323;overflow: hidden;
        }

        .nav {
            display: inline-flex;
            position: relative;
            overflow: hidden;
            max-width: 100%;
            background-color: #fff;
            padding: 0 20px;
            border-radius: 40px;
            box-shadow: 0 10px 40px rgba(159, 162, 177, 0.8);
        }

        .nav-item {
            color: #83818c;
            padding: 20px;
            text-decoration: none;
            transition: .3s;
            margin: 0 6px;
            z-index: 1;
            font-family: 'DM Sans', sans-serif;
            font-weight: 500;
            position: relative;
        }
        .nav-item:before {
            content: "";
            position: absolute;
            bottom: -6px;
            left: 0;
            width: 100%;
            height: 5px;
            background-color: #dfe2ea;
            border-radius: 8px 8px 0 0;
            opacity: 0;
            transition: .3s;
        }

        .nav-item:not(.is-active):hover:before {
            opacity: 1;
            bottom: 0;
        }

        .nav-item:not(.is-active):hover {
            color: #333;
        }

        .nav-indicator {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 4px;
            transition: .4s;
            height: 5px;
            z-index: 1;
            border-radius: 8px 8px 0 0;
        }

        @media (max-width: 580px) {
            .nav {
                overflow: auto;
            }
        }
    </style>
</head>
<body>
<nav class="nav">
    <a href="#" class="nav-item is-active" active-color="orange">Home</a>
    <a href="#" class="nav-item" active-color="green">About</a>
    <a href="#" class="nav-item" active-color="blue">Testimonials</a>
    <a href="#" class="nav-item" active-color="red">Blog</a>
    <a href="#" class="nav-item" active-color="rebeccapurple">Contact</a>
    <span class="nav-indicator"></span>
</nav>
<script>
    const indicator = document.querySelector('.nav-indicator');
    const items = document.querySelectorAll('.nav-item');

    function handleIndicator(el) {
        items.forEach(item => {
            item.classList.remove('is-active');
            item.removeAttribute('style');
        });

        indicator.style.width = `${el.offsetWidth}px`;
        indicator.style.left = `${el.offsetLeft}px`;
        indicator.style.backgroundColor = el.getAttribute('active-color');

        el.classList.add('is-active');
        el.style.color = el.getAttribute('active-color');
    }


    items.forEach((item, index) => {
        item.addEventListener('click', e => {handleIndicator(e.target);});
        item.classList.contains('is-active') && handleIndicator(item);
    });
</script>
</body>
</html>

效果图：
在这里插入图片描述

云处安

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
动画菜单栏指示器

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxi...
复制链接

扫一扫