Queridos Stackoverflow lectores,

He estado rompiendo la cabeza por algo que he visto en Tympanus, y no puedo entender la manera correcta de hacer tal cosa.

En este enlace: http://tympanus.net/Tutorials/FullscreenBookBlock/
se puede ver que el menú está completamente oculto, y sólo es visible cuando se haga clic en un icono. Tiene una hermosa transición, y que básicamente aproximadamente resume lo que estoy tratando de lograr.

La única diferencia con el ejemplo anterior es que no quiero ocultar completamente esta altura total del elemento, y me gustaría realizar el anterior efecto con un pase en lugar de tener que hacer clic en un botón. Así, en un mundo ideal te gustaría ver una barra vertical, y al pasar el cursor sobre la barra (o haga clic en él con el dedo, si estás en un tablet), se «abre» y se muestra el contenido completo en el interior del abierto div.

Ahora, puedo hacer un poco decente en html5 y css3, pero el de arriba se explica el efecto que estoy tratando de lograr que me ha dado dolores de cabeza graves, jeje. ¿Alguien conoce un tutorial que yo podría haber perdido que hace esto exactamente?

p.s.: He intentado desmontar Tympanus’ html/css, pero con la página de veces el efecto de que se apliquen también en esto me parece que no puede averiguar, de ahí mi esperanza para alguien de aquí para que me ayude en mi camino 🙂

InformationsquelleAutor user1898838 | 2012-12-12

1 Comentario

  1. 7

    http://jsfiddle.net/LDntf/2/

    #menu{
        position:absolute;
        width:175px;
        padding-right:25px;
        top:0;
        bottom:0;
        margin-left:-175px;
        background:#d00;
        -webkit-transition:margin-left .5s ease-in-out;
        z-index:1;
    }
    #menu:hover{
        margin-left:0;
    }

    Tener el contenido de movimiento, usted puede simplemente animar el div de contenido así: http://jsfiddle.net/LDntf/8/

    #menu:hover + #content{
        left:200px;
        right:-175px;
    }
    #content{
        padding:1em;
        position:absolute;
        top:0;
        bottom:0;
        right:0;
        margin-right:-20px; /* hide the scrollbars */
        margin-bottom:-20px;
        left:25px;
        overflow:scroll;    /* always render the scrollbars, without this, the content may occasionally be cut off at the edge. */
        -webkit-transition:left .5s ease-in-out, right .5s ease-in-out;
    }​
    • Oh, esto con el hover es precisamente lo que yo estaba buscando, gracias! 🙂 Sólo para mi conocimiento, sin embargo: Si me gustaría mover el contenido de la zona así cuando el puntero del mouse sobre el menú-div, habría que modificar nada fundamentalmente en su solución? Su ejemplo parece ser un enfoque muy diferente de la de Ashley (la solución por encima de la tuya); los miré a ambos, pero por alguna razón que destacar mi debilidad, jeje. Puedo diseño decentemente bien con html/css, pero para conseguir que las cosas cambien (como con Ashley ejemplo) hace que mi cabeza de vuelta 🙂

Dejar respuesta

Please enter your comment!
Please enter your name here