title: Vanilla JavaScript solution to make a fluid menu tab active state?
body: <p>I've been looking at this <a href="https://codepen.io/aaroniker/pen/pezemX?editors=0010" rel="nofollow noreferrer">Codepen</a>, and trying to find a vanilla JS way to do this (my company doesn't use jQuery).</p>
  <p>So far I've made the line the correct width when you click on a menu item, but I can't figure out how to make it stretch like in the Codepen. I added a custom attribute of <code>index</code> to keep track of numbers, and also applied a class to easily target the element. I wasn't sure if there's also a way to just have one. Feel free to change what I've already made.</p>
  <p>EDIT: I updated the code below to make it work going left, but not right. Also it only works if the links are next to each other. Anyone?</p>
  <p>My codepen: <a href="https://codepen.io/ahoward-mm/pen/jOmgxQJ?editors=0010" rel="nofollow noreferrer">https://codepen.io/ahoward-mm/pen/jOmgxQJ?editors=0010</a> (desktop only).</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var navList = document.querySelector(".navigation__list");
  var navItems = navList.getElementsByClassName("navigation__item");
  var navLine = document.querySelector(".navigation__line");
  
  for (var i = 0; i &lt; navItems.length; i++) {
    navItems[i].classList.add(`navigation__item--${i + 1}`);
    navItems[i].setAttribute("index", `${i + 1}`);
  
    var prevItem = 0;
    var currentItem = 1;
  
    navItems[i].addEventListener("click", function() {
      var current = document.getElementsByClassName("active");
  
      if (current.length &gt; 0) {
        current[0].className = current[0].className.replace(" active", "");
      }
  
      this.className += " active";
  
      prevItem = currentItem;
  
      currentItem = this.getAttribute("index");
  
      navLine.style.width = `${
        document
          .querySelector(`.navigation__item--${currentItem}`)
          .querySelector(".navigation__link")
          .getBoundingClientRect().width +
        document
          .querySelector(`.navigation__item--${prevItem}`)
          .getBoundingClientRect().width
      }px`;
  
      navLine.style.left = `${
        this.querySelector(".navigation__link").offsetLeft
      }px`;
  
      setTimeout(function() {
        navLine.style.width = `${
          document
            .querySelector(`.navigation__item--${currentItem}`)
            .querySelector(".navigation__link")
            .getBoundingClientRect().width
        }px`;
      }, 700);
    });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    color: #444;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }
  
  .navigation {
    display: block;
    position: sticky;
    top: -0.5px;
    background-color: #edece8;
    margin: 60px 0 0;
    text-align: center;
  }
  
  .navigation__list {
    list-style: none;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    position: relative;
  }
  
  .navigation__link {
    color: inherit;
    line-height: inherit;
    word-wrap: break-word;
    text-decoration: none;
    background-color: transparent;
    display: block;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.875rem;
    font-weight: bold;
    margin: 15px (20px * 2) 0 (20px * 2);
    position: relative;
  }
  
  .navigation__line {
    height: 2px;
    position: absolute;
    bottom: 0;
    margin: 10px 0 0 0;
    background: red;
    transition: all 1s;
  }
  
  .navigation__item {
    list-style: none;
    display: flex;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="navigation"&gt;
    &lt;ul class="navigation__list"&gt;
      &lt;li class="navigation__item"&gt;
        &lt;a class="navigation__link" href="#"&gt;Lorem ipsum&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="navigation__item"&gt;
        &lt;a class="navigation__link" href="#"&gt;Dolor&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="navigation__item"&gt;
        &lt;a class="navigation__link" href="#"&gt;Consectetur adipiscing&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="navigation__item"&gt;
        &lt;a class="navigation__link" href="#"&gt;Donec ut&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="navigation__item"&gt;
        &lt;a class="navigation__link" href="#"&gt;Placerat dignissim&lt;/a&gt;
      &lt;/li&gt;
      &lt;div class="navigation__line"&gt;&lt;/div&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>