<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
box-sizing:border-box;
font-family:consolas;
}
body{
display: flex;
justify-content: center;
align-items:center;
min-height:100vh;
}
nav{
position: relative;
display: flex;
}
nav a{
position: relative;
margin: 0 20px;
font-size: 2em;
color: #000;
text-decoration: none;
}
nav #marker{
position: absolute;
left: 0;
height: 4px;
width: 0;
background-color: #000;
bottom: -8px;
transition: 0.5s;
border-radius: 4px;
}
</style>
</head>
<body>
<nav class="">
<div id="marker"></div>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Portfolio</a>
<a href="#">Team</a>
<a href="#">Contact</a>
</nav>
<script>
var marker = document.querySelector('#marker')
var item = document.querySelectorAll('nav a')
function indicator(e){
marker.style.left = e.offsetLeft + 'px'
marker.style.width = e.offsetWidth + 'px'
}
item.forEach(link => {
link.addEventListener('click',(e) => {
indicator(e.target)
})
})
</script>
</body>
</html>
