1

Estoy tratando de hacer un menú responsivo con html css y javascript y funciona bien, cuando hago click en alguna opción del menú en pantallas menores de 768px se cierra el menú y aparece el botón de menú nuevamente. Hasta ahí todo va bien, como el menú se cerro después de ese procedimiento yo hago 'resize' para una pantalla mayor a 768px y me sigue apareciendo el botón del menú, trate de quitarlo con el evento 'resize' pero no me funciona (me elimina el botón menú en pantallas menores de 768 al hacer 'resize', aunque le especifiqué que solo en pantallas mayores), creo que está mal porque debería parar de ejecutar la función o algo, la verdad no estoy muy seguro.

Gracias por la ayuda.

document.addEventListener("DOMContentLoaded", function() {
    click_events();
 });



 var width = window.innerWidth;


window.addEventListener('resize', function() {
   resize_events();
});



 function click_events(){

   if(width <= 768){
      var options = document.getElementsByClassName("menu-options"); 
      for(var i=0; i < options.length; i++){
          //cuando le de click a cada a cierre el menu
          options[i].addEventListener("click", function(){
              var menu = document.getElementById("menu");
              menu.style.marginLeft = "-100%";
              //esconda el boton de cerrar X
              var btn_close_menu = document.getElementById("x-close-menu");
              btn_close_menu.style.display = "none";
              //muestre el boton del menu
              var btn_open_menu = document.getElementById("bars-open-menu");
              btn_open_menu.style.display = "block";
              //cuando haga click sobre el boton menu
              btn_open_menu.addEventListener("click", function(){
                  menu.style.marginLeft = "0";
                  btn_close_menu.style.display = "block";
                  this.style.display = "none";
              });
               //cuando haga click sobre el boton cerrar
               btn_close_menu.addEventListener("click", function(){
                  btn_open_menu.style.display = "block";
                  this.style.display = "none";
                  menu.style.marginLeft = "-100%";
               });
          });
      }
   }
 }

 
 function resize_events(){

   if(width >= 769){
      var btn_open_menu = document.getElementById("bars-open-menu");
    btn_open_menu.style.display = "none";
   }
 }
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

ul {
    list-style: none;
}


h1, h2, h3 {
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
}


.container {
    width: 90%;
    margin: auto;
   /*max-width: 1200px;*/
    
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    background: #ffffff;
    z-index: 100;
    padding: 15px 0;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .img-container {
    width: 50px;
}

header .img-container img {
    width: 100%;
}

header .btn-menu, .btn-close-menu {
    display: block;
}

header nav {
    margin-left: -100%;
}

header nav ul {
    display: flex;
}

header nav ul li {
    padding-right: 10px;
}

header nav ul li:last-child {
    padding-right: 0;
}

header nav ul li a {
    color: #000;
    font-weight: 500;
    font-size: 1.0625rem;
    transition: 0.3s;
}

header nav ul li a:hover {
    text-decoration: line-through;
    color: #14f3bd;;
}

header nav ul li a:active {
    text-decoration: line-through;
    color: #000;
}


/*******Menú********/

header .x-close-menu, #btn-menu, .bars-open-menu {
    display: none;
    font-size: 20px;
}

@media screen and (max-width: 768px){

    nav  {
        position: fixed;
        background: #0000EC ;
        width: 100%;
        left: 0;
        top: 84px;
        height: 100vh;
        overflow-y: auto;
        display: flex;
        margin-left: -100%;
      
    }

    nav ul {
        flex-direction: column;
        width: 100%;
        overflow-y: auto;
        padding-left: 20px;
        padding-top: 30px;
    }

    nav ul li {
        padding: 20px 0;
    }

    header nav ul li a {
        color: #ffffff;
        text-align: left;
    }

    /*opening and closing menu*/


    header .bars-open-menu {
        display: block;
    }

    header #btn-menu:checked ~ .menu {
        margin-left: 0;
        transition: 1s;
    }


    header #btn-menu:checked ~ .bars-open-menu{
        display: none;
    }

    
    header #btn-menu:checked ~ .x-close-menu {
        display: block;
    }


    header #btn-menu:not(:checked) ~ .menu {
        margin-left: -100%;
        transition: 1s;
    }

}
<!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" href="css/styles.css">
    <link href="https://fonts.googleapis.com/css?family=Karla|Rubik&display=swap" rel="stylesheet">
    <script src="https://use.fontawesome.com/c3e042a20b.js"></script>
    <title>My podcast</title>
</head>
<body>
    <header>
        <div class="container">
            <div class="img-container">
                <img src="images/logo.png" alt="">
            </div>
            <input type="checkbox" id="btn-menu" class="btn-menu">
            <label class="bars-open-menu" id="bars-open-menu" for="btn-menu"><i class="fas fa-bars"></i></label>
            <label class="x-close-menu" id="x-close-menu" for="btn-menu"><i class="fas fa-times"></i></label>
           
            <nav class="menu" id="menu">
                <ul>
                    <li><a class="menu-options" href="#episodes">EPISODIOS</a class="menu-options"></li>
                    <li><a class="menu-options" href="#us">NOSOTROS</a></li>
                    <li><a class="menu-options" href="#interviews">ENTREVISTAS</a></li>
                    <li><a class="menu-options" href="#topics">TÓPICOS</a></li>
                </ul>
            </nav>
        </div>    
    </header>
<script src="js/effects.js"></script>
</html>

introducir la descripción de la imagen aquí

2
  • 2
    Yo utilizaría media queries de css y te olvidas de JavaScrit para eso.
    – alexval
    el 16 dic. 2019 a las 7:24
  • Tienes varios problemas... Deberías de actualizar la variable width al hacer resize, ademas de esto la comprobación if(width <= 768){ la deberías de hacer dentro del evento ya que si lo haces fuera lo único que estas haciendo es que se aplique el evento solo si en ese momento era de tamaño <=768
    – x3k
    el 16 dic. 2019 a las 11:00

2 respuestas 2

0

Puedes hacerlo con media querys, pon tu botón en pantalla completa y solo dale un display: "none" para ocultar, ya en los media querys le pones un display block en los pixeles que necesites para mostrarlo al tener el tamaño de pantalla que pusiste, igual en los media querys solo adaptas los enlaces del menú como los necesites o en la posición que requieras, y le puedes agregar una clase extra para ocultar o mostrar el menú, ya con javascript solo le das un evento click al botón ara quitar o agregar esa clase que oculta y muestra el menú.

1
  • Considera añadir un ejemplo reproducible o algún código. el 24 ene. 2021 a las 0:03
-1

Según el código que tienes, bastaría con añadir y quitar propiedades con css a tu #btn-menu. Creo que te sería más fácil de controlar la funcionalidad del menú responsive trabajándolo directamente con media-queries en aquellos breakpoint que te interesen para el menú, pero para tal y como tienes ahora mismo estructurado tu código te bastaría con añadir a tu css lo siguiente:

@media screen and (max-width: 768px){
     #btn-menu {display: inline-block}
}

@media screen and (min-width: 768px){
  #btn-menu {display: none}
}
3
  • Por favor revisa la publicación del OP. En su código CSS ya incluye estas media-querys. Usa el javascript para que en tamaños pequeños (<=768) al hacer click en un botón del menú (lateral azul) se cierre automáticamente el menú. Si desactivas sus funciones JS ya realiza el código que propones.
    – x3k
    el 16 dic. 2019 a las 13:52
  • en su código no está incluida la opción que le facilito para su css, lo que no he hecho es copiar todo su código. Si en su código css incluye lo que le puesto, en el caso del max-width dentro de su media-query ya creada y en el caso del min-width incluyéndolo todo tal y como lo pongo verá que el problema que describe se soluciona. Es decir, el check solo desaparece en el tamaño de pantalla donde él quiere.
    – JorgeGuz
    el 16 dic. 2019 a las 14:00
  • Hola lo único que me funcionó fue volver a hacer el for dentro del resize pero esta vez decirle que al hacer click en cada anchor no mostrar el menú, si el ancho es mayor de 769, tambien mostar o esconder el btn del menu segun el tamaño de la pantalla tambien dentro del resize el 16 dic. 2019 a las 17:24

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.