<div class="header">
 <div class="menu">
  <svg class="line-top" width="750" height="15" viewbox="0,0 1000,20">
   <line
    class="line-dash"
    x1="0"
    y1="15"
    x2="1000"
    y2="15"
    style="stroke: orange; stroke-width:2; stroke-linecap:round; stroke-dasharray: 180,1200; stroke-dashoffset: -35;"
   />
  </svg>
  <ul>
   <li>Home</li><li>Gallery</li><li>Contact</li><li>About</li>
  </ul>
  <svg class="line-bottom" width="750" height="30" viewbox="0,0 1000,40">
   <polygon class="lb" points="35,53 115,53 125,43 135,53 215,53" />
   <polygon class="lb" points="285,53 365,53 375,43 385,53 465,53" />

   <polygon class="lb" points="535,53 615,53 625,43 635,53 715,53" />

   <polygon class="lb" points="785,53 865,53 875,43 885,53 965,53" />
  </svg>
 </div>
</div>
<div class="content">
 <h1>Navigation Bar with Hover and Click effects</h1>
</div>

/*   DESKTOP DEMO OF SVG EFFECTS. */

@import url("https://fonts.googleapis.com/css?family=Lato");

html {
  height: 100%;
}

body {
  height: 100%;
  background-color: #9387ab;
  font: 400 10px "Lato", sans-serif;
  text-align: center;
}

.header {
  width: 100%;
  height: 75px;
  background: #17141d;
  opacity: 0.95;
  overflow: hidden;
  -webkit-box-shadow: #333 1px 3px 4px;
  -moz-box-shadow: #333 1px 3px 4px;
  box-shadow: #333 1px 3px 4px;
}

.content {
  width: 100%;
  height: calc(100% - 75px);
  background-image: url(https://picsum.photos/1000/700);
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: #9387ab;
}
h1 {
  letter-spacing: 4px;
  padding: 1em;
  color: white;
  background-color: #17141d;
  opacity: 0.8;
}

svg.line-top {
  width: 100%;
  background-color: #17141d;
}
svg.line-bottom {
  width: 100%;
}
.menu {
  width: 750px;
  margin: 0 auto;
}
ul {
  padding: 0;
  margin: 0;
}

ul li {
  margin: 0;
  padding: 10px 0 10px 0;
  width: 25%;
  height: 10px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: white;
  cursor: pointer;
  display: inline-block;
  letter-spacing: 3.5px;
  transition: all 0.5s ease-out;
}

li.active {
  color: orange;
  transform: scale(1.1);
}

polygon {
  stroke-width: 2px;
  stroke: orange;
  fill: orange;
}

@media (max-device-width: 991px) {
  .header {
    height: 64px;
  }

  body {
    font-size: 0.4em;
  }
  .content {
    height: calc(100% - 64px);
  }
}

const lis = document.querySelectorAll("li");
const lbs = document.querySelectorAll(".lb");
const ul = document.querySelector("ul");
const lineDash = document.querySelector(".line-dash");


var dashOrigin = -35; //pixels
var selectedLi = -35; //pixels
var speed = 500; //move this many pixels in one second.
var distance = 0;
var time = 0;

// initial animation and class for HOME
TweenLite.to(lbs[0], 0.6, {
          y: -43,
          ease: Bounce.easeOut,
          delay: 1
        });

lis[0].classList.add("active");

//push all the bottom lines down.
function pushDownLb() {
  for(let k = 0; k < lbs.length; ++k)
    TweenLite.to(lbs[k], 0.5, {
          y: 0,
          ease:  Power3.easeOut
        });
}

ul.addEventListener(
  "mouseleave",
  function(e) {
    // to avoid a bug in chrome that sometimes triggers mouseleave on click
    // and the relatedTarget comes up null
    if (e.relatedTarget) {
      distance = Math.abs(dashOrigin - selectedLi);
      time = distance / speed;
      dashOrigin = selectedLi;
      if (time) {
        // overlaping tweens would give a zero time
        TweenLite.to(lineDash, time, {
          strokeDashoffset: selectedLi,
          ease: Bounce.easeOut
        });
      } //if
    } //if
  },
  false
);

for (let i = 0; i < 4; ++i) {
  lis[i].addEventListener("mouseover", function() {
    distance = Math.abs(-250 * i - 35 - dashOrigin);
    time = distance / speed;
    dashOrigin = -250 * i - 35;
    if (time) {
      TweenLite.to(lineDash, time, {
        strokeDashoffset: -250 * i - 35,
        ease: Bounce.easeOut
      });
    } //if
  });

  lis[i].addEventListener("click", function() {
    selectedLi = -250 * i - 35;
    pushDownLb();
    let current = document.getElementsByClassName("active");
    current[0].classList.remove("active");
    lis[i].classList.add("active");
    TweenLite.to(lbs[i], 0.5, {
          y: -43,
          ease: Bounce.easeOut
        });
  });
}