Question

Dear Stackoverflow readers,

I’ve been breaking my head over something I’ve seen at Tympanus, and I can’t figure out how to properly do such a thing.

In this link: http://tympanus.net/Tutorials/FullscreenBookBlock/
you can see that the menu is completely hidden, and only visible when you click on an icon. It has a lovely transition, and it basically roughly sums up what I’m trying to accomplish.

The only difference with the above example is that I don’t want to completely hide this full-height element, and I’d like to accomplish the above effect with a hover instead of having to click a button. So in an ideal world you’d see a vertical bar, and when you hover over that bar (or click on it with your finger if you’re on a tablet), it “opens up” and shows you the full content inside the opened div.

Now, I can make a decent bit in html5 and css3, but the above explained effect that I’m trying to accomplish has given me serious headaches, hehe. Does anyone happen to know a tutorial I might have missed that does this exact thing?

p.s.: I have tried to take apart Tympanus’ html/css, but with the page-fold effect that’s also implemented in it I can’t seem to figure it out, hence my hope for someone here to help me on my way 🙂

Answer 1

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

To have the content move, you can simply animate the content div as well: 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;
}​