[Navbar] Sliding Menu Indicator - Html, CSS, JS

Sliding Menu Indicator

 

See the Pen ExNxVJy by Eunji Jeon (@emcjrl) on CodePen.

 

Html

---

<nav class="navbar">
  <div id="marker"></div>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Books</a>
  <a href="#">Portfolio</a>
  <a href="#">Contact</a>  
</nav>

 

CSS

---

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Georgia, "Times New Roman", Times, serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.navbar {
  position: relative;
  display: flex;
}

.navbar a {
  position: relative;
  margin: 0 20px;
  font-size: 1.2em;
  color: #000;
  text-decoration: none;
}

.navbar #marker {
  position: absolute;
  left: 0px;
  height: 1px;
  width: 0px;
  background: #000;
  bottom: -6px;
  transition: 300ms ease-in;
}

 

JavaScript

---

const marker = document.querySelector('#marker');
const menu = document.querySelector('.navbar');


function indicator(event) {
  marker.style.left = `${event.offsetLeft}px`;
  marker.style.width = `${event.offsetWidth}px`;
}

menu.addEventListener('click', (event) =>{
  // console.log(event);
  if(event.target.nodeName === 'A') {
    indicator(event.target);
  }
});