Nav bar sliding effect

by Trina Lu

HTML

<nav>
  <ul>
    <li index="0" class="active">Home</li>
    <li index="1">About</li>
    <li index="2">Works</li>
    <li index="3">Contact</li>
    <div id="after"></div>
  </ul>
</nav>

SCSS

$blue: rgb(72, 110, 183);
$width: 100px;
$speed: 0.15s;
@mixin transition {
  transition: all $speed cubic-bezier(0.65, 0.05, 0.36, 1);
  -webkit-transition: all $speed cubic-bezier(0.65, 0.05, 0.36, 1);
}

@mixin after($child) {
  position: relative;
  #{$child} {
    content: '';
    position: absolute;
    width: 100%;
    display: block;
  }
}

nav {
  font-family: 'Open Sans', sans-serif;
}

ul{
  padding: 0;
  @include after('.after');
  #after {
    width: $width;
    bottom: 0;
    left: 0;
    height: 5px;
    background: $blue;
    @include transition;
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
  }
}

li {
  display: table-cell;
  width: $width;
  text-align:center;
  line-height:50px;
  cursor: pointer;
  &:hover{
    color: $blue;
  }
}

JavaScript

var list = document.querySelectorAll('li');
var bar = document.querySelector('#after');
walkthrough(list, listen, 'click', onclick);

function listen(_ele, _action, _callback) {
  _ele.addEventListener(_action, _callback);
}

function onclick(e) {
  if (this.classList.contains("active")) {
    return false;
  }

  walkthrough(list, function(_li) {
    _li.classList.remove("active");
  });
  this.classList.add("active");
  var t = parseInt(this.getAttribute("index")) * 100;
  setTimeout(function() {
    bar.style.transform = "translateX(" + t + "%)";
    bar.style.webkitTransform = "translateX(" + t + "%)";
  }, 90);
}

function walkthrough(_collections, _handler, _arguments) {
  _args = [];
  for (var i = 2; i < arguments.length; i++) {
    _args.push(arguments[i]);
  }
  for (var i = 0; i < _collections.length; i++) {
    _args.unshift(_collections[i]);
    _handler.apply(this, _args);
    _args.shift(_collections[i]);
  }
}