经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
教你做个可爱的css滑动导航条_CSS教程_CSS
来源：jb51　　时间：2021/6/21 9:37:06　　对本文有异议

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

实现效果

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

实现过程

1. 前期准备

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

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

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

  1. <div class="slipNav">
  2.     <nav>
  3.         <a href="javascript:;" class="selected">首页</a>
  4.         <a href="javascript:;">我的</a>
  5.         <a href="javascript:;">联系</a>
  6.         <a href="javascript:;">订阅</a>
  7.         <a href="javascript:;">管理</a>
  8.         <a href="javascript:;">相册</a>
  9.         <!-- 底部线条 -->
  10.         <div class="line"></div>
  11.         <!-- 背景滑块 -->
  12.         <div class="bgc"></div>
  13.     </nav>
  14. </div>

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

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

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

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

  1. .slipNav nav {
  2.     position: relative;
  3.     background-color: white;
  4.     border-radius: 50px;
  5. }
  6.  
  7. .slipNav nav::after {
  8.     content: '';
  9.     display: block;
  10.     clear: both;
  11. }

tips：清除浮动的三件套要牢记噢！

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

  1. .slipNav a {
  2.     position: relative;
  3.     float: left;
  4.     width: 150px;
  5.     line-height: 50px;
  6.     text-align: center;
  7.     font-size: 18px;
  8.     color: #000;
  9.     z-index: 1;
  10. }

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

  1. .line {
  2.     position: absolute;
  3.     top: 50px;
  4.     left: 35px;
  5.     /* 线的长宽 */
  6.     height: 3px;
  7.     width: 80px;
  8.     background-color: #54a0ff;
  9.     transition: all .3s;
  10. }
  11.  
  12. .bgc {
  13.     position: absolute;
  14.     top: 0px;
  15.     left: 25px;
  16.     height: 50px;
  17.     width: 100px;
  18.     border-radius: 50px;
  19.     background-color: rgb(84, 126, 233);
  20.     transition: all .3s;
  21. }

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

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

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

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

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

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

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

  1. //鼠标移入底下的线跟着移动
  2. slipNav.addEventListener('mouseover', function (e) {
  3.     let target = e.target
  4.     let len = 150 * target.dataset.index + 35;// 计算当前的left值
  5.     line.style.left = len + 'px';
  6. })
  7. //鼠标移出时底下的线回到原来的位置
  8. slipNav.addEventListener('mouseleave', function (e) {
  9.     let selected = document.querySelector('.slipNav .selected')//原先被选中的元素
  10.     let len = 150 * selected.dataset.index + 35 // 线回到被选择元素的位置
  11.     line.style.left = len + 'px'
  12. })

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

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

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

  1. //鼠标点击时背景颜色的滑块滑倒相应的位置
  2. slipNav.addEventListener('click', function (e) {
  3.     let target = e.target;
  4.     let bgc = document.querySelector('.bgc')
  5.     //排他思想
  6.     for (let i = 0; i < slipAll.length; i++) {
  7.         slipAll[i].classList.remove('selected')
  8.     }
  9.     target.classList.add('selected');// 通过添加类名实现颜色变化
  10.     let len = 150 * target.dataset.index + 25 // 计算背景滑块left值
  11.     bgc.style.left = len + 'px';
  12. })

完整代码

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.  
  15.         body {
  16.             background-color: rgb(221, 230, 245);
  17.         }
  18.  
  19.         a {
  20.             color: inherit;
  21.             text-decoration: none;
  22.         }
  23.  
  24.         .slipNav {
  25.             width: 920px;
  26.             margin: 100px auto;
  27.         }
  28.  
  29.         .slipNav a {
  30.             position: relative;
  31.             float: left;
  32.             width: 150px;
  33.             line-height: 50px;
  34.             text-align: center;
  35.             font-size: 18px;
  36.             color: #000;
  37.             z-index: 1;
  38.         }
  39.  
  40.         .slipNav nav {
  41.             position: relative;
  42.             background-color: white;
  43.             border-radius: 50px;
  44.         }
  45.  
  46.         .slipNav nav::after {
  47.             content: '';
  48.             display: block;
  49.             clear: both;
  50.         }
  51.  
  52.         .slipNav nav :hover {
  53.             color: #54a0ff;
  54.         }
  55.  
  56.         .selected {
  57.             color: white !important;
  58.         }
  59.  
  60.         .line {
  61.             position: absolute;
  62.             top: 50px;
  63.             left: 35px;
  64.             /* 线的长宽 */
  65.             height: 3px;
  66.             width: 80px;
  67.             background-color: #54a0ff;
  68.             transition: all .3s;
  69.         }
  70.  
  71.         .bgc {
  72.             position: absolute;
  73.             top: 0px;
  74.             left: 25px;
  75.             /* 线的长宽 */
  76.             height: 50px;
  77.             width: 100px;
  78.             border-radius: 50px;
  79.             background-color: rgb(84, 126, 233);
  80.             transition: all .3s;
  81.         }
  82.     </style>
  83. </head>
  84.  
  85. <body>
  86.     <div class="slipNav">
  87.         <nav>
  88.             <a href="javascript:;" class="selected">首页</a>
  89.             <a href="javascript:;">我的</a>
  90.             <a href="javascript:;">联系</a>
  91.             <a href="javascript:;">订阅</a>
  92.             <a href="javascript:;">管理</a>
  93.             <a href="javascript:;">相册</a>
  94.             <!-- 底部线条 -->
  95.             <div class="line"></div>
  96.             <!-- 背景滑块 -->
  97.             <div class="bgc"></div>
  98.         </nav>
  99.     </div>
  100.     <script>
  101.         let line = document.querySelector('.line');
  102.         let slipNav = document.querySelector('.slipNav nav');
  103.         let slipAll = document.querySelectorAll('.slipNav nav a');
  104.         //给所有的a标签添加index属性，方便后面查找
  105.         for (let i = 0; i < slipAll.length; i++) {
  106.             slipAll[i].setAttribute('data-index', i)
  107.         }
  108.         //鼠标移入底下的线跟着移动
  109.         slipNav.addEventListener('mouseover', function (e) {
  110.             let target = e.target
  111.             let len = 150 * target.dataset.index + 35;// 计算当前的left值
  112.             line.style.left = len + 'px';
  113.         })
  114.         //鼠标移出时底下的线回到原来的位置
  115.         slipNav.addEventListener('mouseleave', function (e) {
  116.             let selected = document.querySelector('.slipNav .selected')
  117.             let len = 150 * selected.dataset.index + 35 // 线回到被选择元素的位置
  118.             line.style.left = len + 'px'
  119.         })
  120.         //鼠标点击时背景颜色的滑块滑倒相应的位置
  121.         slipNav.addEventListener('click', function (e) {
  122.             let target = e.target;
  123.             let bgc = document.querySelector('.bgc')
  124.             //排他思想
  125.             for (let i = 0; i < slipAll.length; i++) {
  126.                 slipAll[i].classList.remove('selected')
  127.             }
  128.             target.classList.add('selected');// 通过添加类名实现颜色变化
  129.             let len = 150 * target.dataset.index + 25 // 计算背景滑块left值
  130.             bgc.style.left = len + 'px';
  131.         })
  132.     </script>
  133. </body>
  134.  
  135. </html>

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

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

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号