分段控制导航栏-html代码-BFW代码库

分段控制导航栏

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1355f6;
  overflow: hidden;
}

#app {
  width: 350px;
  height: 350px;
  display: grid;
  place-items: center;
}
#app ul {
  position: relative;
  width: 350px;
  height: 50px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 35px;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 12.5px 10px rgba(0, 0, 0, 0.08), 0 100px 80px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}
#app ul li {
  list-style: none;
  display: grid;
  place-items: center;
  font-family: "montserrat";
  color: #1355f6;
  z-index: 10;
  cursor: pointer;
}
#app ul .focus-el {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% / 3);
  height: 100%;
  border-radius: 35px;
  background: #fff;
  box-shadow: 0 12.5px 10px rgba(0, 0, 0, 0.015), 0 100px 80px rgba(0, 0, 0, 0.03);
}
#app ul .focus-el.el--2 {
  left: calc(-100% / 3);
}
</style>

</head>
<body translate="no">
<div id="app">
<ul>
<li>Music</li>
<li>Movies</li>
<li>Apps</li>
<div class="focus-el el--1"></div>
<div class="focus-el el--2"></div>
</ul>
</div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/gsap.min.js"></script>
<script >
console.clear();

const liContainer = document.querySelector("ul");
const liEls = [...document.querySelectorAll("ul li")];
const slideEl_1 = document.qu.........完整代码请登录后点击上方下载按钮下载查看