menú responsivo

estilos.css

* {
  /* outline */  
  outline: 1px solid #acd;
}

#cabecera li {
  list-style: none;
}

#cabecera {
  /* w100p */
  width: 100%;
  /* h15vh */
  height: 15vh;
  /* posr */
  position: relative;
}

#menu {
  /* dn */
  display: none;
}

button.abrirMenu {
  /* posa */
  position: absolute;
  /* r0 */
  right: 0;
  /* t */
  top: calc( 50% - 1rem );
  /* h2rem */
  height: 2rem;
}


#menu.visible {
  /* posf */
  position: fixed;
  /* t0 */
  top: 0;
  /* l0 */
  left: 0;
  /* dg */
  display: grid;
  /* w100vw */
  width: 100vw;
  /* h100vh */
  height: 100vh;
  /* bgc */
  background-color: #fff;
  
  place-items: center;
  /* acc */
  align-content: center;
}




main {
  /* w100p */
  width: 100%;
  /* h85vh */
  height: 85vh;
  /* dg */
  display: grid;
  place-items: center;
}

index.html

<!-- header#cabecera -->
<header id="cabecera">
  <!-- nav#menu -->
  <nav id="menu">
    <!-- li>a -->
    <li>
      <a href="#">
        Elemento Menú
      </a>        
    </li>
    <li>
      <a href="#">
        Elemento Menú
      </a>        
    </li>
    <li>
      <a href="#">
        Elemento Menú
      </a>        
    </li>
    <li>
      <a href="#">
        Elemento Menú
      </a>        
    </li>
    <li>
      <a href="#">
        Elemento Menú
      </a>        
    </li>    
  </nav>
  
  <!-- button.abrirMenu -->
  <button class="abrirMenu" onclick="alternarMenu()">
    Menú
  </button>
  
</header>

<!-- main -->
<main>
  <!-- h1 -->
  <h1>
    Área principal
  </h1>
</main>

script.js

var menuVisible = false

function alternarMenu() {
  
  var menu = document.querySelector("#menu")
  
  if( menuVisible ) {    
    menu.classList.remove("visible")
    menuVisible = false    
  } else {
    menu.classList.add("visible")
    menuVisible = true    
  }
  
}