estoy creando un menú responsive (soy nuevo en esto) y tengo un fallo: cuando intento abrir el menú hamburguesa (en pantalla pequeña, en la grande está el menú horizontal normal), no me abre el menú pero me pone más grande el height del icono. Necesito que, al darle al botón, el icono se quede arriba y abajo aparezca todo el menú pero no quiere saber de funcionar.
const button = document.getElementById("button");
const menu = document.getElementById("menu");
const menuList = document.getElementById("menu__list");
const items = document.getElementsByClassName("menu__items");
button.addEventListener('click',function(e){
menu.classList.toggle("openMenu");
menuList.classList.toggle("openList");
items.classList.toggle("openItems");
})
.menu{
display: flex;
position: fixed;
width: 100%;
height: 30px;
background-color: rgb(65, 70, 220);
}
.menu__list{
display: flex;
position: fixed;
height: 30px;
width: 100%;
justify-content: flex-end;
}
.menu__items{
display: flex;
height: 30px;
list-style-type: none;
border-left: 1px solid rgb(255,255,255);
}
.menu__list li a{
margin: 10px;
display: flex;
color: rgb(255,255,255);
text-transform: uppercase;
align-items: center;
font-size: 0.9rem;
}
.menu__list li:hover{
background-color: rgb(56, 39, 170);
}
.menu__list li a:hover{
text-decoration:none;
}
.button{
display: none;
}
@media screen and (max-width:737px){
.menu{
display: flex;
height: 30px;
}
.menu__list{
display: flex;
height: 30px;
width: 100%;
margin: 0;
flex-direction: column;
padding: 0 0;
align-items: center;
justify-content: center;
}
.menu__items{
display: none;
}
.button{
display: flex;
width: 100%;
height: 30px;
margin-top: 0;
font-size: 20px;
}
.button i{
display: flex;
height: 30px;
width: 100%;
justify-content: center;
align-items: center;
}
.button i:hover{
background-color: rgb(56, 39, 170);
}
.openMenu{
display: flex;
height: 150px;
}
.openList{
display: flex;
height: 150px;
width: 100%;
margin: 0;
flex-direction: column;
padding: 0 0;
align-items: center;
justify-content: center;
}
.openItems{
display: flex;
height: 30px;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<title>Proyecto</title>
</head>
<body>
<header>
<nav class="menu" id="menu">
<ul class="menu__list" id="menu__list">
<div class="button" id="button">
<i class="fas fa-bars"></i>
</div>
<li class="menu__items"><a href="">Quien somos</a></li>
<li class="menu__items"><a href="">Contactanos</a></li>
<li class="menu__items"><a href="">Ubicación</a></li>
<li class="menu__items"><a href="">Ir a menú</a></li>
</ul>
</nav>
</header>
<main>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>