Hacer que el icono del menu cambie al abrirse este

[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