教你做个可爱的css滑动导航条


Posted in HTML / CSS onJune 15, 2021

嘿!大家好哇,今天来带大家做一个可爱?的滑动导航栏效果,这个demo很基础,但是使用场景非常广泛噢 :happy: !作为前端大白,今天就手把手一步一步教你实现它吧!❤️

实现效果

教你做个可爱的css滑动导航条

看!这个滑动的效果很有趣吧!这样的滑动效果相信你一定有想过吧!✋

实现过程

1. 前期准备

虽然这个控件很小,功能也不是很多,但我们还是需要先分析一下它的结构,以及实现的功能

鼠标移入对应的列表项,底部的线会滑到相应的位置

点击相应的列表项,背景滑块会切换到所选择的列表项

<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>

通过上面简单的分析,我们可以写出html结构,在基本列表项的基础上添加了一个线条和滑块:happy:

2. 使用CSS对导航条进行修饰

这部分很简单没有涉及什么难得属性,相信聪明可爱的你一定信手拈来:happy:

首先我们先对整个导航栏进行一些调整,给导航栏添加了背景颜色,同时添加一定的圆角,让整个导航栏看起来圆嘟嘟?,由于后面内部的标签使用了浮动和定位,所以这里需要清除浮动噢!

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

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

tips:清除浮动的三件套要牢记噢!

接下来我们对每一个列表项进行美化吧!调整字体大小,行高使得文本状态最佳 ☘️ !

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

下面来对底部线条以及背景滑块进行加工吧,通过绝对定位的方式定位到默认选择文本的下方,背景滑块也是同理!

.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;
}

3. 使用JS来实现线条滑块的功能

在上面的美化过程中,我们对线条以及背景滑块采用了绝对定位,就是为了下面通过控制left值来控制它们的位置变化!下面就来实现吧!

实现功能:鼠标移入对应的列表项,底部的线会滑到相应的位置

由于导航条中的项目过多,在后面查找对应元素索引时会比较麻烦,所以我们先给所有的列表项添加一个自定义属性data-index来代表他们的索引

let slipAll = document.querySelectorAll('.slipNav nav a');
//给所有的a标签添加index属性,方便后面查找
for (let i = 0; i < slipAll.length; i++) {
    slipAll[i].setAttribute('data-index', i)
}

接下来我们通过监听鼠标移入的位置来计算线的left值,

这里通过事件委托来实现,通过获取触发事件的index属性来计算left值,当鼠标移出导航栏时,由于没有选择其他的项,所以线条需要回到原先被选中元素的位置

//鼠标移入底下的线跟着移动
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'
})

注意:由于在css代码中设置了过渡属性,所以在改变left值时,不会突变而是一个滑动过程噢!?

实现功能:点击相应的列表项,背景滑块会切换到所选择的列表项

当我们鼠标点击列表项时,我们需要选中当前元素,背景块需要定位到当前位置!实现方法相同

//鼠标点击时背景颜色的滑块滑倒相应的位置
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';
})

完整代码

需要代码可以直接复制噢!

<!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: rgb(221, 230, 245);
        }

        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: #54a0ff;
        }

        .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>

噢!完成了!以上就是本次demo的完整代码噢,感兴趣的你可以动手试试噢!相信一定会有所收获噢!

到此这篇关于教你做个可爱的css滑动导航条的文章就介绍到这了,更多相关css滑动导航条内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
彻底弄明白CSS3的Media Queries(跨平台设计)
Jul 27 HTML / CSS
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
HTML中fieldset标签概述及使用方法
Feb 01 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
Jan 29 HTML / CSS
html+css实现文字折叠特效实例
Jun 02 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 HTML / CSS
Html5大屏数据可视化开发的实现
关于html选择框创建占位符的问题
Jun 09 #HTML / CSS
html实现弹窗的实例
Jun 09 #HTML / CSS
html css3不拉伸图片显示效果
html2 canvas svg不能识别的解决方案
Jun 03 #HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 #HTML / CSS
CSS极坐标的实例代码
You might like
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
使用PHP Socket写的POP3类
2013/10/30 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
iframe子父页面调用js函数示例
2013/11/07 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
Python 查找字符在字符串中的位置实例
2018/05/02 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
python3.7 的新特性详解
2019/07/25 Python
python自动生成model文件过程详解
2019/11/02 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
函授本科个人自我鉴定
2014/03/25 职场文书
出国英文推荐信
2014/05/10 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
2014年医生工作总结
2014/11/21 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python