css和js，好看的菜单切换
2020-03-26 本文已影响0人
前端架构师陈龙威
效果：
菜单切换效果
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Lato, sans-serif;
background: #ECEFFC;
}
.navtab {
/*css 中设置变量，使用 --bianliang 符号定义，使用时用 width: var(--bianliang) 符号使用*/
--navtab-width: 600px;
--navtab-item-width: calc(var(--navtab-width) / 4 - 20px);
--navtab-overlay-width: calc(var(--navtab-item-width) + 80px);
--active-index: 0;
position: relative;
width: var(--navtab-width);
height: 150px;
background: white;
border: 1em solid white;
border-radius: 5% 5% 15% 15% / 15% 15% 50% 50%;
overflow: hidden;
}
ul {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
ul .navtab-item {
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
flex-direction: column;
width: var(--navtab-item-width);
height: 100%;
color: #0288d1;
cursor: pointer;
transition: 0.5s ease;
}
ul i {
transition: 0.5s ease;
}
ul span {
font-size: 20px;
user-select: none;
opacity: 0;
transition: 0.5s ease;
}
ul .navtab-item.active {
width: var(--navtab-overlay-width);
}
ul .navtab-item.active svg {
transform: translateY(-10px);
}
ul .navtab-item.active span {
opacity: 1;
}
.navtab::after {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: var(--navtab-overlay-width);
background: #b3e5fc;
border-radius: 20px;
transform: translateX(calc(var(--navtab-item-width) * var(--active-index)));
transition: 0.5s ease;
}
</style>
</head>
<body>
<nav class="navtab">
<ul>
<li class="navtab-item active">
<i>Home</i>
<span>Home</span>
</li>
<li class="navtab-item">
<i>Explore</i>
<span>Explore</span>
</li>
<li class="navtab-item">
<i>Collection</i>
<span>Collection</span>
</li>
<li class="navtab-item">
<i>Help</i>
<span>Help</span>
</li>
</ul>
</nav>
<script>
let navtab = document.querySelector("nav.navtab");
let navtabItems = document.querySelectorAll("li.navtab-item");
navtabItems.forEach((navtabItem, activeIndex) =>
navtabItem.addEventListener("click", () => {
navtabItems.forEach(navtabItem => navtabItem.classList.remove("active"));
navtabItem.classList.add("active");
navtab.style.setProperty(
"--active-index",
`${activeIndex}`
);
})
);
</script>
</body>
</html>
