Show/hide menu without JS and without additional tag

by Simon Hi

HTML

<h1>Show/hide menu without JS and without additional tag</h1>

<nav id="magicNav" tabindex="-1">
  <a href="https://alsacreations.com">Actualités</a>
  <a href="https://www.alsacreations.com/tutoriels/">Tutoriels</a>
  <a href="https://forum.alsacreations.com">Forum</a>
</nav>

<main>Lorem ipsum</main>

CSS

#magicNav {
  position: relative;
  margin-top: 3em;
  outline: 0;
  height: 0;
  z-index: 1;
}

#magicNav:before,
#magicNav:after {
  display: block;
  height: 2em;
  line-height: 2em;
  width: 10em;
  position: absolute;
  top: -2em;
  background: #ccc;
  padding: 0 0.25em;
}

#magicNav:before {
  content: "Show Menu";
}

#magicNav:after {
  content: "Hide Menu";
  display: none;
  pointer-events: none;
}

#magicNav a {
  display: none;
  height: 1.5em;
  line-height: 1.5em;
  width: 10em;
  background: #ddd;
  padding: 0.25em;
}

#magicNav:focus:after,
#magicNav:focus a,
#magicNav a:active {
  display: block;
}

#magicNav a:nth-of-type(2):active {
  position: absolute;
  top: 2em;
}

#magicNav a:nth-of-type(3):active {
  position: absolute;
  top: 4em;
}

#magicNav:focus:before {
  display: none;
}

#magicNav a:hover {
  background: #bbb;
}

main {
  height: 10em;
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}