0

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>

1 respuesta 1

0

Recuerda que getElementsByClassName, te trae un arreglo de valores porque es una lista, por lo cual tienes que recorrelo primero para poder hacer el toggle. Solamente ese seria tu error, de ahi todo correcto.

const button = document.getElementById("button");
const menu = document.getElementById("menu");
const menuList = document.getElementById("menu__list");
var items = document.getElementsByClassName("menu__items");
button.addEventListener('click',function(e){
menu.classList.toggle("openMenu");
menuList.classList.toggle("openList");
[...items].forEach(function (child) {
    child.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>

3
  • Muchas gracias! Entonces el codigo es espagueti pero no tanto?... Hahahaha.
    – Iamdaavide
    Commented el 19 dic. 2020 a las 4:01
  • Pd: De hecho había intentado hacerlo pero con un ciclo for normal. El problema es que, como no me salió, me "rendí"
    – Iamdaavide
    Commented el 19 dic. 2020 a las 4:01
  • De hecho, intente con un ciclo for normal, pero creo que es porque te trae una coleccion html, por eso hago uso de esta manera para dar solucion, es entendible aun jajaja Commented el 19 dic. 2020 a las 4:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.