[SOLUCIONADO] ¿Como hago esta animacion?

[shekel]

Soy bastante novato en el desarrollo de una web y tengo esta duda de la cual no se como resolverla..

Tengo una cabezera la cual quiero que al pulsarla se despliege moviendose de derecha a izquierda y muestre otros elementos..

He echo esta imagen, al principio y al final de la animacion.

Hay un elemento en la esquina superior derecha y al pulsar se despliega hasta ocupar el ancho de la pantalla y tambien se ve un input text

[Alexis88]

Esta sería una forma de hacerlo con código JS nativo, con la salvedad de que funciona en la mayoría de navegadores, pero, en IE, solo a partir de la versión 9.

Código HTML:

<div>
    <input type = "text" />
</div>
 

Código CSS:

div{
    background: red;
    width: 2.5%;
    float: right;
    cursor: pointer;
}
 
div input{
    opacity: 0;
    width: 0;
}
 

Código Javascript:

var div = document.querySelector("div"),
    input = div.querySelector("input"),
    body = document.body,
    bodyWidth, divWidth;
 
div.addEventListener("click", function(){
    bodyWidth = parseFloat(body.clientWidth);
    divWidth = parseFloat(getComputedStyle(div).width);
    if (divWidth == bodyWidth){
        this.style.width = (bodyWidth * 0.025) + "px";
        input.style.opacity = 0;
        input.style.width = 0;
    }
    else{
        this.style.width = bodyWidth + "px";
        input.style.opacity = 1;
        input.style.width = "auto";
    }
}, false);
 

Ahora, la explicación. En el documento, tenemos a una división, la cual contiene una caja de texto. En la hoja de estilos, le asigno el 2.5% del ancho del cuerpo del documento (el elemento padre) a la división y la alineo a la derecha, además, le doy 0 de opacidad a la caja de texto para que no se vea al inicio y 0 de ancho. En el código JS, tomo a ambos elementos, así como al cuerpo del documento y declaro dos variables que usaré más adelante.

Cuando demos un clic a la división, se ejecutará una función. En dicha función, tomo el ancho del cuerpo del documento y el de la división pero sin la unidad de medida, que en este caso es 'px', quedando solo la parte numérica. Luego, si el ancho de la división es igual al del cuerpo del documento, le asigno el 2.5% del mismo y desaparezco a la caja de texto, caso contrario, le asigno el ancho del cuerpo del documento a la división y hago visible a la caja de texto, además de asignarle un ancho automático (el cual es calculado por el navegador).

DEMO

Para obtener compatibilidad con navegadores antiguos (y que, por fortuna, cada vez son menos usados), revisa la documentación existente de los métodos y propiedades que utilicé.

• Document.querySelector
• Element.querySelector
• Element.clientWidth
• Window.getComputedStyle
• Opacity

También puedes consultar en CanIUse acerca de la compatibilidad con los navegadores más usados de los métodos y propiedades que utilicé, además, te recomiendo utilizar identificadores para trabajar con los elementos, así evitarás conflictos con otros elementos similares.

Saludos