Alternative navbars using radiobutton

by DominoPivot

HTML

<header class="masthead">
  <a href="#" class="masthead__title">Foobar</a>
  <nav class="masthead__nav">
    <ul class="masthead__sections">
      <li><a href="#">Home</a></li>
      <li><a href="#" class="is-current">Blog</a></li>
      <li><a href="#">Merch</a></li>
      <li><a href="#">About</a></li>
    </ul>
    <ul class="masthead__languages">
      <li><a href="#" class="is-current">English</a></li>
      <li><a href="#">Français</a></li>
    </ul>
  </nav>
</header>

CSS

.masthead {
  background: linear-gradient(to left, #22a, #2a2);
  color: white;
  text-align: center;
}

.masthead__title {
  color: white;
  display: inline-block;
  font-size: 1.5em;
  text-decoration: none;
  padding: .5em;
}

.masthead__nav {
  display: flex;
  flex-flow: row wrap-reverse;
  justify-content: space-between;
}

.masthead__sections,
.masthead__languages{
  background: #5f5;
  color: white;
  display: flex;
  flex-flow: row;
  flex: 1 1 50%;
  justify-content: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
}

.masthead__languages {
  background: #55f;
  flex-flow: row-reverse;
}

.masthead__sections a,
.masthead__languages a {
  background: #5f5;
  color: black;
  display: block;
  padding: .5em;
  text-decoration: none;
  user-select: none;
}

.masthead__languages a {
  background: #55f;
  color: white;
}

.masthead li a.is-current {
  background: #fff;
  color: black;
}

JavaScript

/*
	This code only simulates page change for the purpose of the fiddle.
  No JS is actually necessary for the real website.
  The is-current class should be generated by server-side templating.
*/

function onLiAClick({ currentTarget }) {
  currentTarget
  	.parentElement.parentElement
    .querySelector(".is-current")
    .classList
    .remove("is-current");
  currentTarget
  	.classList
    .add("is-current");
}

Array.prototype.forEach.call(document.querySelectorAll("li a"), a => {
	a.addEventListener("click", onLiAClick);
});