Reine CSS3 - /ausblenden voller Höhe für die div mit übergang

Liebe Stackoverflow Leser,

Ich habe Sie bricht mir den Kopf über etwas, was ich gesehen habe bei Tympanus, und ich kann nicht herausfinden, wie man richtig zu tun, ist so eine Sache.

In diesem link: http://tympanus.net/Tutorials/FullscreenBookBlock/
Sie können sehen, dass das Menü komplett ausgeblendet, und nur sichtbar, wenn Sie auf ein Symbol. Es hat einen schönen übergang, und die im Grunde grob zusammenfasst, was ich versuche zu erreichen.

Der einzige Unterschied zum obigen Beispiel ist, dass ich nicht wollen, um vollständig zu verstecken Sie diese in voller Höhe element, und ich möchte erreichen das obige Effekt mit einem hover-anstatt auf eine Schaltfläche klicken. Also in einer idealen Welt würden Sie sehen eine vertikale Leiste, und wenn Sie den Mauszeiger über diese Leiste (oder klicken Sie es mit Ihrem finger, wenn Sie auf einem tablet), es "öffnet" und zeigt Ihnen den vollständigen Inhalt in das geöffnete div.

Nun, kann ich eine anständige bit in html5 und css3, aber der oben erläuterte Effekt, dass ich versuche zu erreichen, hat mir schwere Kopfschmerzen, hehe. Weiß jemand zufällig, ein tutorial habe ich verpasst haben könnte, der dies tut genau das, was?

p.s.: Ich habe versucht, es auseinander zu nehmen Tympanus' html/css, aber mit der Seite-Falten-Effekt, der auch umgesetzt ich kann nicht scheinen, um es herauszufinden, daher meine Hoffnung, das jemand hier mir helfen auf meinem Weg 🙂

jsfiddle.net/LDntf

InformationsquelleAutor user1898838 | 2012-12-12

  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;
}

    Haben, den Inhalt zu verschieben, können Sie einfach animieren das content-div auch: 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, das mit dem hover ist genau das, was ich suchte, danke! 🙂 Nur für meine Kenntnisse zwar: Wenn ich möchte, verschieben Sie den content-Bereich als gut, wenn Sie die Maus auf das Menü-div, würde das nichts ändern grundlegend in Ihrer Lösung? Dein Beispiel scheint ein ganz anderer Ansatz von Ashley (die Lösung vor Euch); ich schaute in beide, aber für einige Grund, warum Sie beiden highlight-meine Schwäche, hehe. Ich kann das layout anständig gut mit html/css, aber damit sich was bewegt (wie bei Ashley ' s z.B.) macht meinen Kopf drehen 🙂

    InformationsquelleAutor Shmiddty

Schreibe einen Kommentar