可爱滴css滑动导航条

我是X大魔王

于 2021-07-16 10:24:18 发布

阅读量333

点赞数 4

分类专栏： HTML页面部件🦄 文章标签： javascript css html5 js

转载必须声明

本文链接：https://blog.csdn.net/Xmumu_/article/details/118786398

版权

HTML页面部件🦄 专栏收录该内容

17 篇文章 11 订阅

订阅专栏

欢迎来到HTML频道🐈

效果
代码
- 分析

今天看到了一个还蛮可爱的滑动导航条，在这里分享一下做法，也同时感谢一下原作者，写的特别好😎

效果

在这里插入图片描述
这里没有录动态的了，大家脑补一下哈，脑补滑动效果🤪

代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: 	#FF7744;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        .slipNav {
            width: 920px;
            margin: 100px auto;
        }

        .slipNav a {
            position: relative;
            float: left;
            width: 150px;
            line-height: 50px;
            text-align: center;
            font-size: 18px;
            color: #000;
            z-index: 1;
        }

        .slipNav nav {
            position: relative;
            background-color: white;
            border-radius: 50px;
        }

        .slipNav nav::after {
            content: '';
            display: block;
            clear: both;
        }

        .slipNav nav :hover {
            color: 	#FFDD55;
        }

        .selected {
            color: white !important;
        }

        .line {
            position: absolute;
            top: 50px;
            left: 35px;
            /* 线的长宽 */
            height: 3px;
            width: 80px;
            background-color: #54a0ff;
            transition: all .3s;
        }

        .bgc {
            position: absolute;
            top: 0px;
            left: 25px;
            /* 线的长宽 */
            height: 50px;
            width: 100px;
            border-radius: 50px;
            background-color: rgb(84, 126, 233);
            transition: all .3s;
        }
    </style>
</head>

<body>
    <div class="slipNav">
        <nav>
            <a href="javascript:;" class="selected">首页</a>
            <a href="javascript:;">我的</a>
            <a href="javascript:;">联系</a>
            <a href="javascript:;">订阅</a>
            <a href="javascript:;">管理</a>
            <a href="javascript:;">相册</a>
            <!-- 底部线条 -->
            <div class="line"></div>
            <!-- 背景滑块 -->
            <div class="bgc"></div>
        </nav>
    </div>
    <script>
        let line = document.querySelector('.line');
        let slipNav = document.querySelector('.slipNav nav');
        let slipAll = document.querySelectorAll('.slipNav nav a');
        //给所有的a标签添加index属性，方便后面查找
        for (let i = 0; i < slipAll.length; i++) {
            slipAll[i].setAttribute('data-index', i)
        }
        //鼠标移入底下的线跟着移动
        slipNav.addEventListener('mouseover', function (e) {
            let target = e.target
            let len = 150 * target.dataset.index + 35;// 计算当前的left值
            line.style.left = len + 'px';
        })
        //鼠标移出时底下的线回到原来的位置
        slipNav.addEventListener('mouseleave', function (e) {
            let selected = document.querySelector('.slipNav .selected')
            let len = 150 * selected.dataset.index + 35 // 线回到被选择元素的位置
            line.style.left = len + 'px'
        })
        //鼠标点击时背景颜色的滑块滑倒相应的位置
        slipNav.addEventListener('click', function (e) {
            let target = e.target;
            let bgc = document.querySelector('.bgc')
            //排他思想
            for (let i = 0; i < slipAll.length; i++) {
                slipAll[i].classList.remove('selected')
            }
            target.classList.add('selected');// 通过添加类名实现颜色变化
            let len = 150 * target.dataset.index + 25 // 计算背景滑块left值
            bgc.style.left = len + 'px';
        })
    </script>
</body>

</html>

分析

这里主要运用了JS去实现线条滑动的功能，给每个项都添加一个下标，然后根据鼠标的点击事件得到位置即可实现😼当然了，具体的内容还是看代码啦，有问题评论区见喽👺，HTML频道到此结束，感谢观看，我们下期很快再见😏
ppp:记得点赞、关注、评论噢🎀

我是X大魔王

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
可爱滴css滑动导航条

欢迎来到HTML频道????效果代码分析今天看到了一个还蛮可爱的滑动导航条，在这里分享一下做法，也同时感谢一下原作者，写的特别好????效果这里没有录动态的了，大家脑补一下哈，脑补滑动效果????代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge
复制链接

扫一扫