OHGODWHY

HTML

<nav id="site-navigation" class="main-navigation">
  <div id="menu-container" class="tabs">
    <button class="menutab" id="menu-aquo" onclick="openDisplay(event, 'aquo')">About
				</button>
    <button class="menutab" id="menu-categories" onclick="openDisplay(event, 'categories')">Categories
				</button>
    <button class="menutab" id="menu-involve" onclick="openDisplay(event, 'involve')">Get involved
				</button>
    <button class="menutab" id="menu-search" onclick="openDisplay(event, 'search')">Search
				</button>

    <div id="submenu">
      <div class="submenu aquo hidden" id="sub-aquo">
        <p>some text with one <a>link</a></p>
      </div>
      <div class="submenu categories hidden" id="zebrology">
        <img src="<?php echo get_template_directory_uri(); ?>/img/zebra.png" />Zebrology
      </div>
      <div class="submenu categories hidden" id="clips">
        <img src="<?php echo get_template_directory_uri(); ?>/img/clip.png" />Clips
      </div>
      <div class="submenu categories hidden" id="articles">
        <img src="<?php echo get_template_directory_uri(); ?>/img/text.png" />Articles
      </div>
      <div class="submenu categories hidden" id="music">
        <img src="<?php echo get_template_directory_uri(); ?>/img/music.png" />Music
      </div>
      <div class="submenu involve hidden" id="signup">
        <img src="<?php echo get_template_directory_uri(); ?>/img/signup.png" />Signup
      </div>
      <div class="submenu involve hidden" id="contact">
        <img src="<?php echo get_template_directory_uri(); ?>/img/contact.png" />Get in touch
      </div>
      <div class="submenu search hidden" id="sub-search">Search</div>
    </div>
  </div>
</nav>
<!-- #site-navigation -->

CSS

/* Menu */

#site-navigation {
  background: #366;
}

#menu-container {
  display: grid;
  grid-gap: 0rem;
  grid-row-gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  justify-content: center;
}

.tabs {
  background-color: #366;
}

.tabs button {
  background-color: inherit;
  color: white;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 1rem;
  transition: 0.3s;
}

.tabs button:hover {
  background: rgba(255, 255, 255, 0.7);
  color: black;
}

.tabs button.active {
  background: rgba(255, 255, 255, 0.6);
  color: black;
}

#submenu {
  grid-column: 1/5;
  display: grid;
  grid-gap: 0rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  justify-content: center;
}

.submenu {
  color: white;
  background: #333;
  text-align: center;
  padding: auto;
  height: 4rem;
}

#sub-aquo {
  background-image: url("img/bgaquo.png");
  grid-column: 1/5;
}

.categories {}

.involve {}

#sub-search {}

.hidden {
  display: none;
}

JavaScript

/**
 * File zebra.js.
 *
 * Handles the navigation menu
 */
function openDisplay(evt, tabName) {
  //Declare all variables
  var i, target, menutab, submenu;

  //Get all elements with class="menutab" and remove class "active"
  menutab = document.getElementsByClassName("menutab");
  for (i = 0; i < menutab.length; i++) {
    menutab[i].className = menutab[i].className.replace(" active", "");
  }

  evt.currentTarget.classList.toggle("active");
  target = "div." + tabName;
  toHide = document.getElementsById("submenu").querySelectorAll(not(".hidden"));
  submenu = document.getElementById("submenu").querySelectorAll(target);
  toHide.forEach(function(item) {
    item.toggle(".hidden")
  });
  submenu.forEach(function(item) {
    item.toggle(".hidden")
  });

}