Hacer que el icono del menu cambie al abrirse este

[Viturbiko]

Hola.

Estoy intentando hacer una web personal y quería crear un efecto que me ha parecido muy curioso, podéis verlo en esta web:

http://www.petas.it/

Como veis arriba a la derecha, al hacer click en el boton, el icono y el color del menu cambian con una animación que me parece muy elegante. ¿Sabéis como podría hacerla? No quiero que me deis el código línea por línea, pero es que no se ni por donde empezar.

Muchas gracias y un saludo.

[fede5426]

Yo lo haría así:

Código HTML:

<div class="boton">
    <div id="linea1" class="linea"></div>
    <div id="linea2" class="linea"></div>
    <div id="linea3" class="linea"></div>
</div>
 

Código CSS:

*{box-sizing:border-box}
 
.boton{
    width:150px;
    margin:2em auto;
    text-align:center;
    background-color:#161616;
    padding:.5em 1em;
    cursor:pointer;
}
 
.linea{
    width:100%;
    border:3px solid #fff;
    margin:2em auto;
    transition:all .3s ease;
}
 
.boton:hover #linea1, 
.boton:hover #linea3{
    width:75%;
}
 
.boton:hover .linea{
    border-color:#B20C1D;
}
 

Código Javascript:

var click = 0;
$(".boton").click(function(){
    if(click == 0){ 
        click = 1;
        $("#linea1").css({
                transform: "rotate(45deg) translate(28px, 25px)"
        });
        $("#linea2").css({
                opacity: "0"
        });
        $("#linea3").css({
                transform: "rotate(-45deg) translate(28px, -25px)"
        });
    } else {
            click = 0;
            $("#linea1").css({
                    transform: "rotate(0deg) translate(0, 0)"
            });
            $("#linea2").css({
                    opacity: "1"
            });
            $("#linea3").css({
                    transform: "rotate(0) translate(0, 0)"
            });
        }
});
 

Las lineas se animan con la propiedad transform de CSS, con más tiempo y un poco de imaginación se pueden hacer efectos un toque más rebuscados, por ejemplo que las lineas den un giro completo antes de formar la X..

Basicamente se indica con Jquery (o javascript puro, es igual) que al clickear sobre el elemento ".boton", los divs que forman las lineas roten y se acomoden para formar la X en el botón.

Te dejo un Pen, cualquier duda que tengas pregunta..

http://codepen.io/fede5426/pen/OyyGPb

Saludos

[Viturbiko]

Muchas gracias por tu respuesta.

¿Sabes por qué motivo al aplicar un float:right al botón para que aparezca a la derecha de la pantalla se anula el efecto hover? Es decir, si le aplico ese float, al pasar el ratón por encima no pasa nada.

Gracias de nuevo y un saludo.

[AngelKrak]

amigo si quieres aplicarle el float right crea un nuevo div y dale a ese el float ;)

Ejemplo:
http://codepen.io/AngelKrak/pen/rOyBmY