教你做个可爱的css滑动导航条
嘿!大家好哇,今天来带大家做一个可爱????的滑动导航栏效果,这个demo很基础,但是使用场景非常广泛噢 :happy: !作为前端大白,今天就手把手一步一步教你实现它吧!❤️
实现效果
看!这个滑动的效果很有趣吧!这样的滑动效果相信你一定有想过吧!✋
实现过程
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滑动导航条内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!