导航栏(酷炫风)--详细教程

刚子最爱编程

已于 2022-10-25 10:20:24 修改

阅读量621

点赞数 3

文章标签： css3 javascript html5

于 2022-10-25 10:08:33 首次发布

本文链接：https://blog.csdn.net/qq_64703421/article/details/127507024

版权

一、页面展示

二、代码分解

三、全部代码

一、页面展示

二、代码分解

源代码已发，想直接用的小伙伴可以直接拿去用。

html代码采用的是无序列表的形式，每个li里面有一个字体图标，当然字体图标是引用线上的，这里等下我会详细说，你可以先理解为一个小图片吧。

布局方式我采用了flex 弹性盒子布局，因为这个比浮动好用多了，当然浮动也可以让他在一行显示，目的相同，定位就是常见的子绝父相

backdrop-filter:blur(15px) ：网上查一下，大致意思就懂了

js：首先我得获取 id为marker 和所有 li ，#marker 就是亮光的小盒子，为什么要获取呢，原因是我每次悬停的时候我都要获取当前 li 下距离左侧的距离因为有过渡，不用担心亮光盒子会瞬移。

数组.forEach() 是用来遍历数组的，跟for循环类似，但是这个方便一些，参数li 就是每个 li ，我给每个li 添加鼠标移入事件，参数e 是事件对象，里面有个target 是获得当前元素的意思

offsetLeft : 这个盒子距离左侧多少距离，因为li的盒子已经定位好了，所有我就要设置亮光的盒子距离当前悬停li下的盒子距离

方法activeLink 里的切换 active ：鼠标移出事件，首先排他思想，遍历先删除所有 li带有active 类的active类，然后 this指向当前悬停的li 给添加上，

扩展，有更好的排他思想，你可以先选中带有active类的哪个 li 删除，再给当前悬停的li 添加，这样可以提高代码运行效率，省去循环删除这个步骤

字体图标

网址：Ionicons: The premium icon pack for Ionic Framework - Version 4

进行这个网址后点击这个

你会看到这个

先把 script 的代码复制到你的页面上，这个是引用字体图标的前提

接着就是字体图标的使用按照他的格式来，它的name就是字体图标的意思，name怎么找看图

复制代码即可使用图标

三、全部代码

css代码



/*  引用外部css*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,li {list-style: none;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; 
 /*  这个相对于给ul加了个垂直居中，效果是这样的   
vh意思是相对于视口的尺寸计算的结果  1vh = 1/100 视口高度  */
  background: #1e2759;
}
ul {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  border-radius: 10px;/* 圆角边框  设置50%为园 */
  box-shadow: 0 5px 25px rgba(0,0,0,.25);
  
}
ul li  a{
  color: white;
  position: relative;
  text-decoration: none;
  display: inline-block;
  padding: 20px 30px;
  z-index: 999;  /* 优先级*/
  backdrop-filter:blur(15px) ;
}
ul li  a ion-icon {
  font-size: 2.5em;
  pointer-events: none;  /* pointer-events:none 限制鼠标事件及对覆盖元素层进行穿透 */
  opacity: 0.25;   /*透明度*/
  transition: 0.25s;  /*过渡时间*/
}
ul li.active a ion-icon {
  opacity: 1;
}
#marker {
  position: absolute;
  top: 0;
  transition: 0.5s;
  z-index: 1;
}
#marker::before {   /*伪类选择器*/
  content: "";
  position: absolute;
  width: 50px;
  height: 40px;
  background: #5da6ff;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);  /* 和left经常搭配使用，可以让其居中  */
  box-shadow: 0 0 15px #5da6ff,   
  0 0 30px #5da6ff,
  0 0 45px #5da6ff,
  0 0 60px #5da6ff;
  border-radius: 8px;
}

页面代码＋ js代码

<!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>酷炫的导航栏</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <ul>
    <li><a href="#">
        <ion-icon name="home-outline"></ion-icon>
      </a>
    </li>
    <li>
      <a href="#">
        <ion-icon name="person-outline"></ion-icon>
      </a>
    </li>
    <li><a href="#">
        <ion-icon name="add-circle-outline"></ion-icon>
      </a>
    </li>
    <li> <a href="#">
        <ion-icon name="settings-outline"></ion-icon>
      </a>
    </li>
    <li> <a href="#">
        <ion-icon name="chatbubble-outline"></ion-icon>
      </a>
    </li>
    <div id="marker"></div>
  </ul>
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
  <script>
    let marker = document.querySelector('#marker')
    let List = document.querySelectorAll('ul li');
    function moveIndicator(e) {
      marker.style.left = e.offsetLeft+'px';
      marker.style.width = e.offsetWidth+'px';
    }
    List.forEach(li => {
      li.addEventListener('mousemove',(e)=>{
        moveIndicator(e.target)
      })
    })

    // add active class in hovered list item
    function activeLink(){
      List.forEach(item=>{
        item.classList.remove('active')
        this.classList.add('active')
      })
    }
    List.forEach(item=>{
      item.addEventListener('mouseover',activeLink)
    })
  </script>
</body>

</html>

刚子最爱编程

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
导航栏(酷炫风)--详细教程

首先我得获取 id为marker 和所有 li ，#marker 就是亮光的小盒子，为什么要获取呢，原因是我每次悬停的时候我都要获取当前 li 下距离左侧的距离因为有过渡，不用担心亮光盒子会瞬移。是用来遍历数组的，跟for循环类似，但是这个方便一些，参数li 就是每个 li ，我给每个li 添加鼠标移入事件，参数e 是事件对象，里面有个target 是获得当前元素的意思。html代码采用的是无序列表的形式，每个li里面有一个字体图标，
复制链接

扫一扫