nav
  .underline
  .underline
  .underline
  a(onClick="ul(0)") Home
  a(onClick="ul(1)") Videos
  a(onClick="ul(2)") Playlists
  a(onClick="ul(3)") Community
  a(onClick="ul(4)") Channels
  a(onClick="ul(5)") About
  
nav.black
  .underline
  .underline
  .underline
  a(onClick="ul(0)") Home
  a(onClick="ul(1)") Videos
  a(onClick="ul(2)") Playlists
  a(onClick="ul(3)") Community
  a(onClick="ul(4)") Channels
  a(onClick="ul(5)") About
  
nav.full
  .underline
  .underline
  .underline
  a(onClick="ul(0)") Home
  a(onClick="ul(1)") Videos
  a(onClick="ul(2)") Playlists
  a(onClick="ul(3)") Community
  a(onClick="ul(4)") Channels
  a(onClick="ul(5)") About
  
nav.retro
  .underline
  .underline
  .underline
  a(onClick="ul(0)") Home
  a(onClick="ul(1)") Videos
  a(onClick="ul(2)") Playlists
  a(onClick="ul(3)") Community
  a(onClick="ul(4)") Channels
  a(onClick="ul(5)") About

:root {
  --underline-height: .5em;
  --transition-duration : .5s;
}

body {
  font-family: system-ui, sans-serif;
  background: whitesmoke;
  min-height: 100vh;
}

nav {
  position: relative;
  white-space: nowrap;
  background: white;
  padding: var(--underline-height) 0;
  margin: 2em 0;
  box-shadow: 0 1em 2em rgba(black, .05);
}

.underline {
  display: block;
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 0;
  height: var(--underline-height);
  width: 20%;
  background: black;
  pointer-events: none;
  mix-blend-mode: multiply;
  transition: transform var(--transition-duration) ease-in-out;
  
  &:nth-child(1) {
    background: yellow;
    transition: calc(var(--transition-duration) * .8);
  }
  &:nth-child(2) {
    background: cyan;
    transition: calc(var(--transition-duration) * 1.2);
  }
  &:nth-child(3) {
    background: magenta;
  }
}

a {
  display: inline-block;
  z-index: 10;
  width: 20%;
  padding: 1em 0;
  text-align: center;
  cursor: pointer;
}

nav.black {
  .underline {
    background: #222;
    border-radius: .25em;
    height: calc(var(--underline-height) / 2);
    mix-blend-mode: initial;
  }
}

nav.full {
  font-weight: bold;
  background: #111;
  color: white;
  
  .underline {
    height: 100%;
    background: gold;
  }
}

nav.retro {
  .underline {  
    border-radius: 100% 100% 0 0;
    
    &:nth-child(1) { background: gold; }
    &:nth-child(2) { background: dodgerblue; }
    &:nth-child(3) { background: tomato; }
  }
}

function ul(index) {
  console.log('click!' + index)
  
  var underlines = document.querySelectorAll(".underline");

  for (var i = 0; i < underlines.length; i++) {
    underlines[i].style.transform = 'translate3d(' + index * 100 + '%,0,0)';
  }
}