js+css3底部下划线导航菜单代码

用户7162790

发布于 2022-03-23 14:01:14

3.9K0

发布于 2022-03-23 14:01:14

文章被收录于专栏：森屿暖树

效果图

js代码

const indicator = document.querySelector('.nav-indicator');
const items = document.querySelectorAll('.nav-item');

function handleIndicator(el) {
items.forEach(item => {
item.classList.remove('is-active');
item.removeAttribute('style');
});

indicator.style.width = `${el.offsetWidth}px`;
indicator.style.left = `${el.offsetLeft}px`;
indicator.style.backgroundColor = el.getAttribute('active-color');

el.classList.add('is-active');
el.style.color = el.getAttribute('active-color');
}

items.forEach((item, index) => {
item.addEventListener('click', e => {handleIndicator(e.target);});
item.classList.contains('is-active') && handleIndicator(item);
});

css代码

* {
  box-sizing: border-box;
}

body {
  text-align: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-image: url("../img/debut_light.png");
}

.nav {
  display: inline-flex;
  position: relative;
  overflow: hidden;
  max-width: 100%;
  background-color: #fff;
  padding: 0 20px;
  border-radius: 40px;
  box-shadow: 0 10px 40px rgba(159, 162, 177, 0.8);
}

.nav-item {
  color: #83818c;
  padding: 20px;
  text-decoration: none;
  transition: .3s;
  margin: 0 6px;
  z-index: 1;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  position: relative;
}
.nav-item:before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #dfe2ea;
  border-radius: 8px 8px 0 0;
  opacity: 0;
  transition: .3s;
}

.nav-item:not(.is-active):hover:before {
  opacity: 1;
  bottom: 0;
}

.nav-item:not(.is-active):hover {
  color: #333;
}

.nav-indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  transition: .4s;
  height: 5px;
  z-index: 1;
  border-radius: 8px 8px 0 0;
}

@media (max-width: 580px) {
  .nav {
    overflow: auto;
  }
}

html代码

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>动画菜单指标</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<nav class="nav"> 
    <a href="#" class="nav-item is-active" active-color="orange">首页</a> 
    <a href="#" class="nav-item" active-color="green">关于我们</a>
    <a href="#" class="nav-item" active-color="blue">公司简介</a>
    <a href="#" class="nav-item" active-color="red">产品中心</a> 
    <a href="#" class="nav-item" active-color="rebeccapurple">联系我们</a>
    <span class="nav-indicator"></span>
</nav>

<script  src="js/script.js"></script>

</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css