1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Tutorial Swipe Menu con jQuery

Tema en 'Tutoriales de la comunidad' comenzado por Maddenamy, 30 de Enero de 2016.

Tags:
  1. Maddenamy

    Maddenamy Miembro conocido

    Se incorporó:
    9 de Enero de 2015
    Mensajes:
    961
    Me gusta recibidos:
    601
    Puntos de trofeos:
    93
    Ocupación:
    Estudiante
    Localización:
    México
    Página web:
    A petición de @RodrigoT hice el tutorial para hacer un menu con efecto swipe (al deslizar la pantalla se abre, como en algunas aplicaciones).

    Este tutorial lo publique en CodePen así que pueden ir para leerlo.

    VER TUTORIAL
    VER DEMO
     
    Última modificación: 30 de Enero de 2016
    A Faustotnc, The Boy, RodrigoT y 1 persona más les gusta esto.
  2. KaoruMishimaru_20

    KaoruMishimaru_20 Miembro conocido

    Se incorporó:
    11 de Agosto de 2015
    Mensajes:
    515
    Me gusta recibidos:
    324
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    KaoruMishimaru
    Localización:
    Argentina, Buenos Aires, La Plata
    Página web:
  3. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    759
    Me gusta recibidos:
    195
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    Graciass @Maddenamy por este tutorial llevaba muchisiiiiimo tiempo intentando hacer esto, luego lo intento implementar en mi web.

    Una cosa para que se cerrase haciendo swipe a la izquierda sería así no?
    Código (Javascript):
    $(document).ready(function() {

      $(document).on('swiperight', function(e) { // detectamos el evento swipe
        e.preventDefault();
        $('#menu').animate({
          left: '0' // hacemos visible el menú con un left: 0
        });
      });

      $(document).on('swipeleft', function(e) { // detectamos el evento swipe
        e.preventDefault();
        $('#menu').animate({
          left: '-100%' // hacemos visible el menú con un left: 0
        });
      });

    });
    Y una cosa más como hago para que los ordenadores no detecten esta orden? Graciasss
     
  4. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    759
    Me gusta recibidos:
    195
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    @Maddenamy No consigo que funcione :/ Como hago para que busque el swipe en todo el body y luego ejecute lo de que salga el nav?? porque si lo pones como tu solo lo detecta en el nav no?
     
  5. The Boy

    The Boy
    Moderador
    Miembro del Equipo

    Se incorporó:
    2 de Mayo de 2015
    Mensajes:
    397
    Me gusta recibidos:
    148
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Desarrollador web
    Localización:
    España
    Página web:
    Gracias por el aporte @Maddenamy. La verdad es que es bastante sencillo de conseguir ese efecto, pero a veces nuestra cabeza va más allá de donde tiene que llegar y nos complicamos el desarrollo :/
     
  6. Maddenamy

    Maddenamy Miembro conocido

    Se incorporó:
    9 de Enero de 2015
    Mensajes:
    961
    Me gusta recibidos:
    601
    Puntos de trofeos:
    93
    Ocupación:
    Estudiante
    Localización:
    México
    Página web:
    Asi es @RodrigoT , para ocultarlo con swipe de nuevo solo es agregar un swipeleft.
    Y para que solo funcione en smarthphones solo se me ocurre detectar el tamaño de pantalla y asi llamar o no a la función.
    DEMO ACTUALIZADO
    • Ahora solo funciona en dispositivos con pantalla menor a 600 (puedes personalizarlo)
    • Se oculta el menú al hacer swipeleft
    Actualmente mi ejemplo busca la función swipe en todo el documento (body).
    Si estas accediendo desde una URL a el archivo (file:///) no funciona el jQuery mobile. Necesitas probarlo en un hosting o en el xampp con una URL de tipo (localhost/... o tusitio.com/...).
     
  7. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    759
    Me gusta recibidos:
    195
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    Tienes mal puesto el condicional en la demo ;) es al revés el >
    Código (Javascript):
    if($(window).width() >= 600){
    Luego pruebo a ver si me funciona :p

    Muchas graciass

    Un saludo :)
     
  8. Maddenamy

    Maddenamy Miembro conocido

    Se incorporó:
    9 de Enero de 2015
    Mensajes:
    961
    Me gusta recibidos:
    601
    Puntos de trofeos:
    93
    Ocupación:
    Estudiante
    Localización:
    México
    Página web:
    Jaja siempre me ha confundido eso, cual significa mayor que y cual es menor que?:confused:
     
  9. The Boy

    The Boy
    Moderador
    Miembro del Equipo

    Se incorporó:
    2 de Mayo de 2015
    Mensajes:
    397
    Me gusta recibidos:
    148
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Desarrollador web
    Localización:
    España
    Página web:
    > mayor que
    < menor que

    :)
     
  10. Maddenamy

    Maddenamy Miembro conocido

    Se incorporó:
    9 de Enero de 2015
    Mensajes:
    961
    Me gusta recibidos:
    601
    Puntos de trofeos:
    93
    Ocupación:
    Estudiante
    Localización:
    México
    Página web:
    Según entiendo
    Significa que si la pantalla es mayor o igual a 600?

    Lo que quiero es que diga que si es menor o igual a 600, para que funcione sólo en pantallas menores.
     
  11. Maddenamy

    Maddenamy Miembro conocido

    Se incorporó:
    9 de Enero de 2015
    Mensajes:
    961
    Me gusta recibidos:
    601
    Puntos de trofeos:
    93
    Ocupación:
    Estudiante
    Localización:
    México
    Página web:
    Gracias

    Entonces esta bien @RodrigoT , sólo funciona en pantallas menores a 600.
     
  12. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    759
    Me gusta recibidos:
    195
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    A ver jajaj ya me estáis liando XD
    Es así eso seguro porque estoy desde el móvil y si no no funciona jajajaj (como te he puesto yo)
    Yo creo que es asi:
    A este lado el grande > A este lado el pequeño
    Por lo tanto creó que significa menor :confused:
     
  13. Maddenamy

    Maddenamy Miembro conocido

    Se incorporó:
    9 de Enero de 2015
    Mensajes:
    961
    Me gusta recibidos:
    601
    Puntos de trofeos:
    93
    Ocupación:
    Estudiante
    Localización:
    México
    Página web:
    Yo también estoy desde el móvil y me funciona.

    Ver imagen
     
  14. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    759
    Me gusta recibidos:
    195
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    Como te he puesto yo o como estaba? Porque si es como estaba a mi no me funcionaba :confused:
     
  15. Maddenamy

    Maddenamy Miembro conocido

    Se incorporó:
    9 de Enero de 2015
    Mensajes:
    961
    Me gusta recibidos:
    601
    Puntos de trofeos:
    93
    Ocupación:
    Estudiante
    Localización:
    México
    Página web:
    No he cambiado el demo, sigue con el <
     
  16. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    759
    Me gusta recibidos:
    195
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    Pues que cosa más rara a mi no me funcionaba :/
     
  17. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    759
    Me gusta recibidos:
    195
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
  18. Maddenamy

    Maddenamy Miembro conocido

    Se incorporó:
    9 de Enero de 2015
    Mensajes:
    961
    Me gusta recibidos:
    601
    Puntos de trofeos:
    93
    Ocupación:
    Estudiante
    Localización:
    México
    Página web:
  19. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    759
    Me gusta recibidos:
    195
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    Es verdad pues que cosa más rara :/ Perdón por el error :p
     
  20. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    759
    Me gusta recibidos:
    195
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    LO CONSEGUÍ te amo @Maddenamy XD pero tengo un problema ahora no me funciona el cambio de color del header, tb me salen unas lineas naranjas de borde del body y al final de la página pone loading XD Como puedo arreglarlo? sabes a que se debe?
    www.rodrigotomenieto.com
     

Comparte esta página