<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - animated menu indicator — week 27/52</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<nav class="nav">
<a href="#" class="nav-item is-active" active-color="orange">Home</a>
<a href="#" class="nav-item" active-color="green">About</a>
<a href="#" class="nav-item" active-color="blue">Testimonials</a>
<a href="#" class="nav-item" active-color="red">Blog</a>
<a href="#" class="nav-item" active-color="rebeccapurple">Contact</a>
<span class="nav-indicator"></span>
</nav>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
@import url("https://fonts.googleapis.com/css?family=DM+Sans:500,700&display=swap");
* {
box-sizing: border-box;
}
body {
text-align: center;
display: -webkit-box;
display: flex;
height: 100vh;
width: 100%;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
padding: 0 20px;
background-image: url("https://www.toptal.com/designers/subtlepatterns/patterns/debut_light.png");
}
.nav {
display: -webkit-inline-box;
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;
-webkit-transition: .3s;
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;
-webkit-transition: .3s;
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;
-webkit-transition: .4s;
transition: .4s;
height: 5px;
z-index: 1;
border-radius: 8px 8px 0 0;
}
@media (max-width: 580px) {
.nav {
overflow: auto;
}
}
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);
});