活动图标导航菜单

效果展示

活动图标导航菜单1.png

CSS 知识点

• CSS 基础知识回顾
• transition 属性运用

整体页面布局实现

<header>
  <nav>
    <a href="#home" style="--clr: #f3219b" class="active">
      <span class="icon">
        <i class="fa-solid fa-house"></i>
      </span>
      <span class="text">Home</span>
    </a>
    <a href="#profile" style="--clr: #2196f3">
      <span class="icon">
        <i class="fa-solid fa-user"></i>
      </span>
      <span class="text">Profile</span>
    </a>
    <a href="#messages" style="--clr: #008a1b">
      <span class="icon">
        <i class="fa-solid fa-comment"></i>
      </span>
      <span class="text">Meessages</span>
    </a>
    <a href="#photos" style="--clr: #dc1dff">
      <span class="icon">
        <i class="fa-solid fa-image"></i>
      </span>
      <span class="text">Photos</span>
    </a>
    <a href="#settings" style="--clr: #d56f1d">
      <span class="icon">
        <i class="fa-solid fa-gear"></i>
      </span>
      <span class="text">Settings</span>
    </a>
    <div class="indicator"></div>
  </nav>
</header>

<!-- 锚点定位用，一个section元素占一屏 -->
<section id="home">Home</section>
<section id="profile">Profile</section>
<section id="messages">Messages</section>
<section id="photos">Photos</section>
<section id="settings">Settings</section>

编辑每一屏的样式

section {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 6em;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.1);
  background-color: #333;
  text-transform: uppercase;
}

section:nth-child(even) {
  background: #444;
}

编辑导航样式

section {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 6em;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.1);
  background-color: #333;
  text-transform: uppercase;
}

section:nth-child(even) {
  background: #444;
}

header {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: 400px;
  height: 60px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.5));
}

header nav {
  display: flex;
  width: 350px;
}

header nav a {
  position: relative;
  list-style: none;
  height: 60px;
  z-index: 2;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
  font-weight: 500;
}

header nav a .icon {
  position: relative;
  display: block;
  line-height: 60px;
  font-size: 1.5em;
  text-align: center;
  transition: 0.5s;
  color: #666;
}

header nav a .icon i {
  font-size: 20px;
}

header nav a .text {
  position: absolute;
  color: #fff;
  padding: 2px 7px;
  border-radius: 12px;
  font-weight: 400;
  font-size: 0.75em;
  letter-spacing: 0.05em;
  transition: 0.5s;
  transform: translateY(15px);
  opacity: 0;
}

使用 JavaScript 编写导航交互事件

let sec = document.querySelectorAll("section");
let links = document.querySelectorAll("header nav a");

window.onscroll = () => {
  sec.forEach((section) => {
    let top = window.scrollY;
    let offset = section.offsetTop;
    let hegiht = section.offsetHeight;
    let id = section.getAttribute("id");

    if (top >= offset && top < offset + hegiht) {
      links.forEach((link) => {
        console.log(id);
        link.classList.remove("active");
        document
          .querySelector("header nav a[href*=" + id + "]")
          .classList.add("active");
      });
    }
  });
};

编写导航突出部分样式

.indicator {
  position: absolute;
  top: -35px;
  width: 70px;
  height: 70px;
  background: #fff;
  border-radius: 50%;
  transition: 0.5s;
  z-index: 1;
}

.indicator::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  top: 5px;
  left: -28px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 15px 18px #fff;
}

.indicator::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  top: 5px;
  right: -28px;
  border-radius: 50%;
  background: transparent;
  box-shadow: -15px 18px #fff;
}

编写导航激活后的样式

header nav a.active .icon {
  transform: translateY(-32px);
  color: var(--clr);
}

header nav a.active .text {
  transform: translateY(-4px);
  background: var(--clr);
  opacity: 1;
}

header nav a:nth-child(1).active ~ .indicator {
  transform: translateX(calc(70px * 0));
}

header nav a:nth-child(2).active ~ .indicator {
  transform: translateX(calc(70px * 1));
}

header nav a:nth-child(3).active ~ .indicator {
  transform: translateX(calc(70px * 2));
}

header nav a:nth-child(4).active ~ .indicator {
  transform: translateX(calc(70px * 3));
}

header nav a:nth-child(5).active ~ .indicator {
  transform: translateX(calc(70px * 4));
}

完整代码下载

完整代码下载