Inicio Blog arrow-menu-nigmacode Cursos Foro

Crear menu responsive


Código HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
  <link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">
</head>
<body>
  <div id="menu-overlay">
    <ul class="menu">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
      <li>Option 4</li>
    </ul>
    <span>
      <i id="btn-close" onClick="closeMenu()" class="fas fa-times btn-menu"></i>
    </span>
  </div>
  <span>
    <i id="btn-open" onClick="openMenu()" class="fas fa-bars btn-menu"></i>
  </span>
</body>
  <script src="index.js" charset="utf-8"></script>
</html>

Código CSS:

body{
  margin:0;
  padding:0;
  background-color:#F5716C;
  font-family: 'Montserrat', sans-serif;
}
.btn-menu{
  font-size: 3rem;
  position: absolute;
  bottom:0;
  right: 0;
  margin:0 1rem 1rem 0;
  cursor:pointer;
}
#menu-overlay{
  display: none;
  top:0;
  left:0;
  position: fixed;
  height: 100%;
  width:100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 5;
}
.menu{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  list-style: none;
  width: 100%;
  max-height: 90%;
  text-align: center;
  overflow-y: auto;
  padding: 0;
}
.menu li{
  color:gray;
  margin-bottom:4rem;
  font-size: 5vh;
  cursor: pointer;
  transition: .3s;
  text-transform: uppercase;
}
.menu li:hover{
  color:white;

}
#btn-close{
  color:white;

}

Código JS:

function openMenu(){
  document.getElementById('menu-overlay').style.display="block";
  document.getElementById('btn-open').style.display="none";
}
function closeMenu(){
  document.getElementById('menu-overlay').style.display="none";
  document.getElementById('btn-open').style.display="block";
}

Preguntas relacionadas

No hay preguntas sobre este artículo.

¿Tienes alguna duda sobre el artículo? ¡Pregunta!