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 Botón animado - Hamb to Arrow

Tema en 'Tutoriales de HTML y CSS' comenzado por fede5426, 12 de Octubre de 2015.

  1. fede5426

    fede5426
    Moderador
    Miembro del Equipo

    Se incorporó:
    5 de Mayo de 2015
    Mensajes:
    237
    Me gusta recibidos:
    171
    Puntos de trofeos:
    43
    Género:
    Hombre
    Hola a todos, después de un tiempo largo vuelvo con un pequeño y simple tutorial.

    Esta vez para mostrarles cómo hacer la animación en la que el menú de tipo hamburguesa (el de las 3 rayitas) se transforme en una flecha al hacer click sobre él.. a pedido de @RodrigoT.

    Lo que Rodrigo me pidió fue un tutorial de cómo hacer esta animación basándose en Material Design de Google (de ahora en más MD), para ser sincero tengo que decirles que no es exactamente el mismo efecto.. quise buscar una alternativa más fácil de entender y explicar, así que lo hice a mi manera.

    En el botón MD vemos que al hacer click se transforma en una flecha, al mismo tiempo que gira 180 grados.. y al clickear de nuevo, sigue girando en la misma dirección hasta llegar a su posición original. Mi versión simplificada hace exactamente lo mismo al hacer click por primera vez, pero al cerrar el menú en lugar de completar el giro, retrocede hacia la dirección contraria.

    El resultado que vamos a obtener es este:

    [​IMG]

    [​IMG]

    Hay diferentes formas de hacerlo, yo les voy a enseñar la mía.. sólo voy a explicar cómo crear el botón y animarlo, doy por sabido que ya conocen cómo hacer aparecer y desaparecer el menú. (De todas formas en el pen va a estar todo el código).

    Empezamos con el código HTML, la versión original usa un button con un span dentro que va a ser la linea del medio en el botón hamburguesa, luego usa after y before para crear las otras 2 lineas.. Con ése método se complica un poco la animación, así que para simplificarlo lo hice de ésta manera:

    HTML:

    <button>
        <span class="linea" id="uno"></span>
        <span class="linea" id="dos"></span>
        <span class="linea" id="tres"></span>
    </button>
     
    Creamos las 3 lineas usando <span>, asignamos la misma clase en las 3 para darles forma, color, separación, etc.. y un identificador diferente a cada una para animarlas individualmente con javascript mas adelante.

    Los estilos que usé son simples:

    Código (CSS):

    button {
        border:0;
        padding:1.5em .5em;
        cursor:pointer;
        background-color:transparent;
        outline:0;
        transition:all .4s ease;
    }

    .linea {
        display:block;
        width:35px;
        height:3px;
        margin:5px;
        background-color:#f2f2f2;
        transition: all .4s ease;
    }
    En éste punto hay que tener muy en cuenta 2 cosas:
    1. Usar display block en el span para que responda a las propiedades width y height.
    2. No olvidar la propiedad transition en ambos elementos para que las animaciones sean suaves.

    Ahora la parte divertida, animar las lineas..
    Para empezar, en mi versión creé nuevas clases con los estilos necesarios para que las lineas formen una flecha apuntando hacia la derecha (después lo giramos con JQuery para que apunte hacia el otro lado, por ahora, derecha).

    Para la flecha superior
    Código (CSS):

    .before-to-arrow{
        transform:rotate(45deg);
        width:55%;
        margin-left:45%;
    }
     
    Para la flecha inferior
    Código (CSS):

    .after-to-arrow{
        transform:rotate(-45deg);
        width:55%;
        margin-left:45%;
    }
     
    En ambos casos roté la linea 45 grados, una en sentido horario y la otra en sentido anti horario.. reduje su tamaño al 55% para que no ocupen tanto espacio y les asigne un margen izquierdo para moverlas hacia el final de la linea central. Estos valores quedan a disposición de ustedes, jueguen con los porcentajes hasta que las lineas se acomoden.. en algunos casos puede ser necesario que necesiten margin-top y margin-bottom para lograr la forma de la flecha.

    Una vez que obtengamos el resultado que queremos, vamos a necesitar una nueva clase para girar todo el botón y que la flecha apunte hacia la izquierda.
    Código (CSS):
    .button-to-arrow{
        transform:rotate(180deg);
    }
    Por último, darle funcionalidad al botón usando JQuery..
    Código (Javascript):

    var click = 0; // definimos la variable que detecta el click
    $("button").click(function(){ // detectamos cuando se clickee el botón
        if(click == 0){ // si la variable click tiene valor 0
            click = 1; // la cambiamos a 1
            $(this).addClass("button-to-arrow"); // giramos el botón agregando la clase que creamos
            $(".linea#uno").addClass("before-to-arrow"); // acomodamos la linea superior
            $(".linea#tres").addClass("after-to-arrow"); // acomodamos la linea inferior
        }
        else{ // si la variable es diferente de 0
            click = 0; // reiniciamos su valor
            $(this).removeClass("button-to-arrow"); // quitamos la clase asignada
            $(".linea#uno").removeClass("before-to-arrow"); // quitamos la clase asignada
            $(".linea#tres").removeClass("after-to-arrow");// quitamos la clase asignada
        }
    });
    Fácil, no? Básicamente detectamos cuando se clickee el botón y le asignamos su respectiva clase modificadora a cada linea, y al clickear nuevamente se la quitamos.

    Espero les sea de utilidad, dejo una DEMO y el PEN para que los revisen y toqueteen el código todo lo que quieran.

    Saludos! :D
     
    A RodrigoT, AngelKrak y gammafp les gusta esto.
  2. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    769
    Me gusta recibidos:
    320
    Puntos de trofeos:
    63
    Género:
    Hombre
    Excelente tutorial, ya era hora jejeej. Saludos.
     
    A fede5426 le gusta esto.
  3. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.014
    Me gusta recibidos:
    406
    Puntos de trofeos:
    83
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    Super genial el tuto, pero deberias de haber separado los Estilos del Boton animado y los de tu contenido jejeje xD y por lo que veo te falto especificar una parte del Jquery que serian los css y animate jajaja xD
     
    A fede5426 le gusta esto.
  4. fede5426

    fede5426
    Moderador
    Miembro del Equipo

    Se incorporó:
    5 de Mayo de 2015
    Mensajes:
    237
    Me gusta recibidos:
    171
    Puntos de trofeos:
    43
    Género:
    Hombre
    Nop, no me faltó nada.. Lo esencial para crear el botón está en este post, el resto de los estilos y código del script que ves en el codepen son agregados nada mas. :D

    Lo aclaré antes de empezar el tutorial:
    No separé los estilos porque están en este post, en limpio.. de igual forma, está resaltado con un comentario que dice "/* ----- Botón ----- */" :p

    Saludos
     
    Última modificación: 12 de Octubre de 2015
    A AngelKrak le gusta esto.
  5. CG21Editor

    CG21Editor Miembro

    Se incorporó:
    3 de Septiembre de 2015
    Mensajes:
    121
    Me gusta recibidos:
    16
    Puntos de trofeos:
    18
    Género:
    Hombre
  6. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    748
    Me gusta recibidos:
    185
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    Genial!! Muchas gracias no lo había visto hasta ahora (funciona un poco mal lo de @... ya que no me ha llegado ninguna notificación). Por fin voy a poder ponerlo en mi theme :D:D Graciass :p
     
    Última modificación: 19 de Octubre de 2015

Comparte esta página