滑动指示器导航源码html+css

最新推荐文章于 2025-05-23 16:12:23 发布

FF_Chen

最新推荐文章于 2025-05-23 16:12:23 发布

阅读量346

点赞数

分类专栏： CSS 文章标签： css html html5

本文链接：https://blog.youkuaiyun.com/FF_Chen/article/details/107137448

版权

CSS 专栏收录该内容

5 篇文章

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
            box-sizing:border-box;
            font-family:consolas;
        }
        body{
            display: flex;
            justify-content: center;
            align-items:center;
            min-height:100vh;
        }
        nav{
            position: relative;
            display: flex;
        }
        nav a{
            position: relative;
            margin: 0 20px;
            font-size: 2em;
            color: #000;
            text-decoration: none;
        }
        nav #marker{
            position: absolute;
            left: 0;
            height: 4px;
            width: 0;
            background-color: #000;
            bottom: -8px;
            transition: 0.5s;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <nav class="">
        <div id="marker"></div>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Portfolio</a>
        <a href="#">Team</a>
        <a href="#">Contact</a>
    </nav>

    <script>

        var marker = document.querySelector('#marker')
        var item = document.querySelectorAll('nav a')

        function indicator(e){
            marker.style.left = e.offsetLeft + 'px'
            marker.style.width = e.offsetWidth + 'px'
        }


        item.forEach(link => {
            link.addEventListener('click',(e) => {
                indicator(e.target)
            })
        })


    </script>
</body>
</html>