1

Tengo este header muy basico con un logo y un menu con dos imagenes uno de hamburger y una X para abrir y cerrar el menu, en mobile a la X le di un display none y al hamburger un block, ya lo tengo para verse en mobile y desktop, pero tengo un problema, en mobile el menu lo tengo oculto con un top -100%, con javascrip estoy haciendo que al dar click en el hamburger me cambie el top a 0 para mostrar el menu, de igual forma cambie el display de la X a block y el del hamburger a none para mostrar la X para cerrar el menu, el problema es que no se como hacer para ahora volver como estaba en un principio que es ocultar el menu y cambiar la X por la hamburger. Esto lo hago agregando clases en css y con un toggle agregarlas y quitarla, pero creo que hay una forma con if, para hacer esto, que es agregando unos estilos desde javascript, lo he intentado pero no encuentro la forma de hacerlo.

let abrir = document.querySelector('.abrir');
let cerrar = document.querySelector('.cerrar');

abrir.addEventListener('click', abrirMenu);

function abrirMenu(){
    let menu = document.querySelector('.main ul');

    abrir.style.display = 'none'
    cerrar.style.display = 'block'


    if(menu){
        menu.style.top = '0px'
    }else if(menu.style.top = '0px'){
        menu.style.top = '-100%'
    }
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background: rgb(228, 228, 228);
}

header{
    background: rgb(95, 95, 95);
}

header .content-header{
    width: 90%;
    height: 60px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .content-header .logo h1{
    font-size: 25px;
    color: white;
}

header .content-header .hamburger{
    cursor: pointer;
    z-index: 9999999;
}

header .content-header .hamburger .abrir{
    display: block;
}

header .content-header .hamburger .cerrar{
    display: none;
}

header .content-header .main ul{
    position: absolute;
    background: rgb(180, 180, 180);
    width: 100%;
    right: 0;
    height: 100vh;


    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: all 500ms;
    top: -100%;

}

header .content-header .main ul li{
    list-style: none;
    margin: 40px 0;
}

header .content-header .main ul li a{
    text-decoration: none;
    color: black;
    font-size: 20px;
}

header .content-header .main ul li a:hover{
    color:rgb(255, 90, 90);
}

@media (min-width:768px){

    header .content-header{
        display: flex;
        justify-content: space-between;
    }

    header .content-header .main ul{
        position: initial;
        flex-direction: row;
        height: 0;
    }

    header .content-header .main ul li{
        margin: 0 20px;
    }

    header .content-header .main ul li a{
        color: white;
        font-size: 18px;
    }

    header .content-header .hamburger{
        display: none;
    }
}
<header>
        <div class="content-header">
            <div class="logo">
                <h1>Fron - End</h1>
            </div>


            <div class="main">
                <ul>
                    <li><a href="#">Inicio</a></li>
                    <li><a href="#">Nosotros</a></li>
                    <li><a href="#">Ubicacion</a></li>
                    <li><a href="#">Informacion</a></li>
                </ul>
            </div>

            <div class="hamburger">
                <img src="img/icon-hamburger.svg" class="abrir">
                <img src="img/icon-close.svg" class="cerrar">
            </div>
        </div>
    </header>

1
  • Te sugiero de identes bien tu código y a la vez lo separes, css, html y javascript para que sea más fácil de leer
    – Christian
    Commented el 22 mar. 2021 a las 18:23

2 respuestas 2

2

Necesitas 2 cosas:

  1. Crear la variable del menú también fuera de las funciones, para no tener que declararla en ambas
  2. Crear una función para revertir los cambios y asignarla al clic del botón cerrar

// Carga todas las variables necesarias en contexto global
let menu = document.querySelector('.main ul');
let abrir = document.querySelector('.abrir');
let cerrar = document.querySelector('.cerrar');

// Asigna evento a los dos botones, con la función que corresponda
abrir.addEventListener('click', abrirMenu);
cerrar.addEventListener('click', cerrarMenu);

function abrirMenu() {
    abrir.style.display = 'none';
    cerrar.style.display = 'block';
    if(menu) {
        menu.style.top = '0px';
    } // No es necesario el else, porque siempre debes abrir el menú
}
// Revierte los cambios cuando se haga clic en el botón cerrar
function cerrarMenu() {
    abrir.style.display = 'block';
    cerrar.style.display = 'none';
    if(menu) {
        menu.style.top = '-100%';
    }
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background: rgb(228, 228, 228);
}

header{
    background: rgb(95, 95, 95);
}

header .content-header{
    width: 90%;
    height: 60px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .content-header .logo h1{
    font-size: 25px;
    color: white;
}

header .content-header .hamburger{
    cursor: pointer;
    z-index: 9999999;
}

header .content-header .hamburger .abrir{
    display: block;
}

header .content-header .hamburger .cerrar{
    display: none;
}

header .content-header .main ul{
    position: absolute;
    background: rgb(180, 180, 180);
    width: 100%;
    right: 0;
    height: 100vh;


    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: all 500ms;
    top: -100%;

}

header .content-header .main ul li{
    list-style: none;
    margin: 40px 0;
}

header .content-header .main ul li a{
    text-decoration: none;
    color: black;
    font-size: 20px;
}

header .content-header .main ul li a:hover{
    color:rgb(255, 90, 90);
}

@media (min-width:768px){

    header .content-header{
        display: flex;
        justify-content: space-between;
    }

    header .content-header .main ul{
        position: initial;
        flex-direction: row;
        height: 0;
    }

    header .content-header .main ul li{
        margin: 0 20px;
    }

    header .content-header .main ul li a{
        color: white;
        font-size: 18px;
    }

    header .content-header .hamburger{
        display: none;
    }
}
<header>
        <div class="content-header">
            <div class="logo">
                <h1>Fron - End</h1>
            </div>


            <div class="main">
                <ul>
                    <li><a href="#">Inicio</a></li>
                    <li><a href="#">Nosotros</a></li>
                    <li><a href="#">Ubicacion</a></li>
                    <li><a href="#">Informacion</a></li>
                </ul>
            </div>

            <div class="hamburger">
                <img src="img/icon-hamburger.svg" class="abrir">
                <img src="img/icon-close.svg" class="cerrar">
            </div>
        </div>
    </header>

1

creo que con algo asi puede funcionar:

let abrir = document.querySelector('.abrir');
let cerrar = document.querySelector('.cerrar');
let estadoBoton = false;

abrir.addEventListener('click', abrirMenu);

function abrirMenu(){
    let menu = document.querySelector('.main ul');
     if(estadoBoton == false){
    abrir.style.display = 'none'
    cerrar.style.display = 'block'
    estado=true;} else {
    abrir.style.display = 'block'
    cerrar.style.display = 'none'
    estadoBoton = false;}


    if(menu){
        menu.style.top = '0px'
    }else if(menu.style.top = '0px'){
        menu.style.top = '-100%'
    }
}

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.