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 :)