Skip to main content
se eliminaron 61 caracteres en el cuerpo
Origen Enlace
rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81

##Actualización:

Viendo un poco tu código completo (css incluido), el primer problema nace al hacer hide en primer lugar. Esto no es necesario por que el header nav ya esta invisible con CSS y media queries: establece display: none; (cuando la pantalla tiene menos de 700 px, fijate en estilos.css linea 620). Por otra parte al poner 2 manejadores de click separados se pisan los estilos. Eso es considerado una mala practica si vas modificar los mismos elementos.

Déjame saber si tienes algún problema.

##Actualización:

Viendo un poco tu código completo (css incluido), el primer problema nace al hacer hide en primer lugar. Esto no es necesario por que el header nav ya esta invisible con CSS y media queries: establece display: none; (cuando la pantalla tiene menos de 700 px, fijate en estilos.css linea 620). Por otra parte al poner 2 manejadores de click separados se pisan los estilos. Eso es considerado una mala practica si vas modificar los mismos elementos.

Déjame saber si tienes algún problema.

Viendo un poco tu código completo (css incluido), el primer problema nace al hacer hide en primer lugar. Esto no es necesario por que el header nav ya esta invisible con CSS y media queries: establece display: none; (cuando la pantalla tiene menos de 700 px, fijate en estilos.css linea 620). Por otra parte al poner 2 manejadores de click separados se pisan los estilos. Eso es considerado una mala practica si vas modificar los mismos elementos.

se añadieron 4 caracteres en el cuerpo
Origen Enlace
rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81

El segundo problema es que el animate que cierra el menu hacia la izq, deja la propiedad style así: style="left: -100%";, haciendo que al agrandar la pantalla, el menu este visible pero desplazado hacia la izquierda todo el ancho de la pantalla, lo que impide verlo :S, por lo que debemos reestablecer esta propiedad al cambiar a la version ancha. Esto lo hice utilizando el evento resize y removeAttr

$(document).ready(function() {

  // maneja la apertura del menu
  var estado = 0;
  $(".menu_bar").click(function() {
    // la primera vez de abre desde arriba
    if (estado === 0) { 
        $("header nav").slideToggle("slow");
        estado = 1;
    } else
    // se cierra hacia la izquierda
    if (estado === 1) { 
         $('nav').animate({
            left: "0"
        });
        estado = 2;       
    } else
    // las veces siguientes se abre desde la izquierda
    if (estado === 2) {
        $("nav").animate({
            left: "-100%"
        });
        estado = 1;
    }
  }); // $(menu).click

  // limpia los vestigios de la animacion
  $(window).resize(function() {
      // aqui se decide si se vuelve a mostrar el menu (pantalla grande)
      if (window.matchMedia("(min-width: 699px)").matches) {
         $("header nav").removeAttr('style'); // restablecemos los estilos de la animacion
         estado = 0; // restablecemos el estado, todo empieza desde el principio.
      }
  }); // $(win).redize

}); // $(doc).ready

El segundo problema es que el animate que cierra el menu hacia la izq, deja la propiedad style así: style="left: -100%";, haciendo al agrandar la pantalla, el menu este visible pero desplazado hacia la izquierda todo el ancho de la pantalla, lo que impide verlo :S, por lo que debemos reestablecer esta propiedad al cambiar a la version ancha. Esto lo hice utilizando el evento resize y removeAttr

$(document).ready(function() {

  // maneja la apertura del menu
  var estado = 0;
  $(".menu_bar").click(function() {
    // la primera vez de abre desde arriba
    if (estado === 0) { 
        $("header nav").slideToggle("slow");
        estado = 1;
    } else
    // se cierra hacia la izquierda
    if (estado === 1) { 
         $('nav').animate({
            left: "0"
        });
        estado = 2;       
    } else
    // las veces siguientes se abre desde la izquierda
    if (estado === 2) {
        $("nav").animate({
            left: "-100%"
        });
        estado = 1;
    }
  }); // $(menu).click

  // limpia los vestigios de la animacion
  $(window).resize(function() {
      // aqui se decide si se vuelve a mostrar el menu (pantalla grande)
      if (window.matchMedia("(min-width: 699px)").matches) {
         $("header nav").removeAttr('style'); // restablecemos los estilos de la animacion
      }
  }); // $(win).redize

}); // $(doc).ready

El segundo problema es que el animate que cierra el menu hacia la izq, deja la propiedad style así: style="left: -100%";, haciendo que al agrandar la pantalla, el menu este visible pero desplazado hacia la izquierda todo el ancho de la pantalla, lo que impide verlo :S, por lo que debemos reestablecer esta propiedad al cambiar a la version ancha. Esto lo hice utilizando el evento resize y removeAttr

$(document).ready(function() {

  // maneja la apertura del menu
  var estado = 0;
  $(".menu_bar").click(function() {
    // la primera vez de abre desde arriba
    if (estado === 0) { 
        $("header nav").slideToggle("slow");
        estado = 1;
    } else
    // se cierra hacia la izquierda
    if (estado === 1) { 
         $('nav').animate({
            left: "0"
        });
        estado = 2;       
    } else
    // las veces siguientes se abre desde la izquierda
    if (estado === 2) {
        $("nav").animate({
            left: "-100%"
        });
        estado = 1;
    }
  }); // $(menu).click

  // limpia los vestigios de la animacion
  $(window).resize(function() {
      // aqui se decide si se vuelve a mostrar el menu (pantalla grande)
      if (window.matchMedia("(min-width: 699px)").matches) {
         $("header nav").removeAttr('style'); // restablecemos los estilos de la animacion
         estado = 0; // restablecemos el estado, todo empieza desde el principio.
      }
  }); // $(win).redize

}); // $(doc).ready
se añadieron 210 caracteres en el cuerpo
Origen Enlace
rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81

##Actualización:

Viendo un poco tu código completo (css incluido), el primer problema nace al hacer hide en primer lugar. Esto no es necesario por que el header nav ya esta invisible con CSS y media queries: establece display: none; (cuando la pantalla tiene menos de 700 px, fijate en estilos.css linea 620). Por otra parte al poner 2 manejadores de click separados se pisan los estilos. Eso es considerado una mala practica si vas modificar los mismos elementos.

El segundo problema es que el animate que cierra el menu hacia la izq, deja la propiedad style así: style="left: -100%";, haciendo que elal agrandar la pantalla, el menu este visible pero desplazado hacia la izquierda todo el ancho de la pantalla, lo que impide verlo :S, por lo que debemos reestablecer esta propiedad al cambiar a la version ancha. Esto lo hice utilizando el evento resize y removeAttr

Si reemplazas main.js por lo siguiente, todo debería funcionar como esperas.

$(document).ready(function() {

  // maneja la apertura del menu
  var estado = 0;
  $(".menu_bar").click(function() {
    // la primera vez de abre desde arriba
    if (estado === 0) { 
        $("header nav").slideToggle("slow");
        estado = 1;
    } else
    // se cierra hacia la izquierda
    if (estado === 1) { 
         $('nav').animate({
            left: "0"
        });
        estado = 2;       
    } else
    // las veces siguientes se abre desde la izquierda
    if (estado === 2) {
        $("nav").animate({
            left: "-100%"
        });
        estado = 1;
    }
  }); // $(menu).click

  // limpia los vestigios de la animacion
  $(window).resize(function() {
      // aqui se decide si se vuelve a mostrar el menu (pantalla grande)
      if (window.matchMedia("(min-width: 699px)").matches) {
         $("header nav").removeAttr('style'); // restablecemos los estilos de la animacion
      }
  }); // $(win).redize

}); // $(doc).ready

Déjame saber si tienes algún problema.

##Actualización:

Viendo un poco tu código completo (css incluido), el primer problema nace al hacer hide en primer lugar. Esto no es necesario por que el header nav ya esta invisible con CSS y media queries: establece display: none; (cuando la pantalla tiene menos de 700 px, fijate en estilos.css linea 620).

El segundo problema es que el animate deja la propiedad style así: style="left: -100%";, haciendo que el menu este visible pero desplazado hacia la izquierda todo el ancho de la pantalla, lo que impide verlo :S, por lo que debemos reestablecer esta propiedad al cambiar a la version ancha. Esto lo hice utilizando el evento resize y removeAttr

Si reemplazas main.js por lo siguiente, todo debería funcionar como esperas.

$(document).ready(function() {

  // maneja la apertura del menu
  var estado = 0;
  $(".menu_bar").click(function() {
    // la primera vez de abre desde arriba
    if (estado === 0) { 
        $("header nav").slideToggle("slow");
        estado = 1;
    } else
    // se cierra hacia la izquierda
    if (estado === 1) { 
         $('nav').animate({
            left: "0"
        });
        estado = 2;       
    } else
    // las veces siguientes se abre desde la izquierda
    if (estado === 2) {
        $("nav").animate({
            left: "-100%"
        });
        estado = 1;
    }
  }); // $(menu).click

  // limpia los vestigios de la animacion
  $(window).resize(function() {
      // aqui se decide si se vuelve a mostrar el menu (pantalla grande)
      if (window.matchMedia("(min-width: 699px)").matches) {
         $("header nav").removeAttr('style'); // restablecemos los estilos de la animacion
      }
  }); // $(win).redize

}); // $(doc).ready

Déjame saber si tienes algún problema.

##Actualización:

Viendo un poco tu código completo (css incluido), el primer problema nace al hacer hide en primer lugar. Esto no es necesario por que el header nav ya esta invisible con CSS y media queries: establece display: none; (cuando la pantalla tiene menos de 700 px, fijate en estilos.css linea 620). Por otra parte al poner 2 manejadores de click separados se pisan los estilos. Eso es considerado una mala practica si vas modificar los mismos elementos.

El segundo problema es que el animate que cierra el menu hacia la izq, deja la propiedad style así: style="left: -100%";, haciendo al agrandar la pantalla, el menu este visible pero desplazado hacia la izquierda todo el ancho de la pantalla, lo que impide verlo :S, por lo que debemos reestablecer esta propiedad al cambiar a la version ancha. Esto lo hice utilizando el evento resize y removeAttr

Si reemplazas main.js por lo siguiente, todo debería funcionar como esperas.

$(document).ready(function() {

  // maneja la apertura del menu
  var estado = 0;
  $(".menu_bar").click(function() {
    // la primera vez de abre desde arriba
    if (estado === 0) { 
        $("header nav").slideToggle("slow");
        estado = 1;
    } else
    // se cierra hacia la izquierda
    if (estado === 1) { 
         $('nav').animate({
            left: "0"
        });
        estado = 2;       
    } else
    // las veces siguientes se abre desde la izquierda
    if (estado === 2) {
        $("nav").animate({
            left: "-100%"
        });
        estado = 1;
    }
  }); // $(menu).click

  // limpia los vestigios de la animacion
  $(window).resize(function() {
      // aqui se decide si se vuelve a mostrar el menu (pantalla grande)
      if (window.matchMedia("(min-width: 699px)").matches) {
         $("header nav").removeAttr('style'); // restablecemos los estilos de la animacion
      }
  }); // $(win).redize

}); // $(doc).ready

Déjame saber si tienes algún problema.

se añadieron 230 caracteres en el cuerpo
Origen Enlace
rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81
Loading
se añadieron 499 caracteres en el cuerpo
Origen Enlace
rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81
Loading
se añadieron 88 caracteres en el cuerpo
Origen Enlace
rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81
Loading
se eliminaron 525 caracteres en el cuerpo
Origen Enlace
rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81
Loading
Publicación recuperada por rnrneverdies
se eliminaron 525 caracteres en el cuerpo
Origen Enlace
rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81
Loading
Publicación eliminada por rnrneverdies
se añadieron 943 caracteres en el cuerpo
Origen Enlace
rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81
Loading
Origen Enlace
rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81
Loading