手把手教你超可爱的导航栏，学姐直呼顺滑！
嘿！大家好哇。今天来带大家做一个可爱的滑动导航栏效果，这个demo很基础，但是使用场景非常广泛噢！作为前端大白，今天就手把手一步一步教你实现它吧！❤️
实现效果
看！这个滑动的效果很有趣吧！这样的滑动效果相信你一定有想过吧！✋
实现过程
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结构，在基本列表项的基础上添加了一个线条和滑块
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>Documenttitle>
<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的完整代码噢，感兴趣的你可以动手试试噢！相信一定会有所收获噢！