Edit in JSFiddle

<ul class="navigation step-1">
  <li><a href="#" onclick="document.querySelector('.navigation').classList.add('step-1')">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
</ul>
.navigation {
  padding: 0;
  width: 75%;
  display: flex;
  flex-flow: row nowrap;
  background: #007bff;
  border-radius: 1.5rem;
  position: relative;
  left: 1rem;
}

.navigation li {
  list-style: none;
  display: inline-block;
  width: 25%;
  text-align: center;
}

.navigation li a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  width: 100%;
  padding: 0.75rem 0;
  border-radius: 1.5rem;
  position: relative;
}

.step-1::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background: #e7e7e7;
  width: 25%;
  height: 100%;
  transform: scale(1.1);
  border-radius: 1.5rem;
}

.step-2::before {
  content: "";
  position: absolute;
  left: 25%;
  top: 0;
  background: #e7e7e7;
  width: 25%;
  height: 100%;
  transform: scale(1.1);
  border-radius: 1.5rem;
  transition: left 0.5s linear;
}

.step-3::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  background: #e7e7e7;
  width: 25%;
  height: 100%;
  transform: scale(1.1);
  border-radius: 1.5rem;
  transition: left 0.5s linear;
}

.step-4::before {
  content: "";
  position: absolute;
  left: 75%;
  top: 0;
  background: #e7e7e7;
  width: 25%;
  height: 100%;
  transform: scale(1.1);
  border-radius: 1.5rem;
  transition: left 0.5s linear;
}
let links = document.querySelectorAll('.navigation li a');
let navbar = document.querySelector('.navigation')
links[0].onclick = () => {
	navbar.classList.remove('step-2', 'step-3', 'step-4');
	navbar.classList.add('step-1');
}
links[1].onclick = () => {
	navbar.classList.remove('step-1', 'step-3', 'step-4');
	navbar.classList.add('step-2');
}
links[2].onclick = () => {
	navbar.classList.remove('step-1', 'step-2', 'step-4');
	navbar.classList.add('step-3');
}
links[3].onclick = () => {
	navbar.classList.remove('step-1', 'step-2', 'step-3');
	navbar.classList.add('step-4');
}