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

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>

声明: 1、本站所有文章仅供参考,如有侵权 请联系我们删除 meng#yimiaonet.com #换成@ 2、文章大部分源自网络或ai生成,文章不作为任何依据,仅供参考。 3、本站的所有源码都是在网络上转载或由用户投稿,仅供参考学习使用,请您务必在下载后24小时内删除。 4、本站下载的所有源码等内容不得用于任何违反相关法律法规的用途,一经发现 我们立即向有关部门报备。 5、如果您需要商用,可以联系客服定制开发或购买商业源码栏目内的内容,当然也可以联系部分源码的原作者;我们最终一切版权。 6、您注册本站会员后,如果需要注销账号等适宜,请联系客服。