Togglable CSS Side Menu

[Knut]

Hi,

I’m trying to create a togglable css side menu. Default state is open, user can close menu if desired, clicked again, it will open. Below are two photos of the effect I want to create:

[Side menu shown](http://pluto.justdied.com/w2box/data/tab-out.png “Sidebar out”)

[Side menu hidden (mirrored/reflected, but you get the idea)](http://pluto.justdied.com/w2box/data/tab-in.png “Sidebar in (wrong side, but you get the idea”)

I figured I’d use a checkbox to trigger the toggling. Then have it switch between two spans for the actual button text (in vs out). I couldn’t get that, nor the transitions to work for me. I pretty much wanted the entire sidebar to slide in xx px.

I’m working on CodePen:
http://codepen.io/knut/pen/cbdvi

If anyone had any ideas, or could point me in the right direction it would be greatly appreciated.

Thank you,
Knut

[Knut]

I managed to get the spans to change when clicked. Although it doesn’t seem to respect the following tag:

cursor: pointer;

It is also clickable below the red box. That wasn’t really my intention.

Still no idea how to get the actual sliding in and out to work. I take it that you can’t select a parent or an element with css only, so I might need need implement some javascript to get the desired effect?

Any feedback would be greatly appreciated.

Thank you

[Junni]

[CSS required](http://jsfiddle.net/jnQ4d/ “Css”)

problem is that if i hover on Services it must show a div below which is displayed none by default but on hover it will display as a block , actually i dont know the css for that so pleas help me

[Junni]

http://jsfiddle.net/jnQ4d/

[Author]

Posts