Pure CSS Sliding Panel

Plain, no animation variation.
no floats, no CSS3. Basic $hit, will work even on IE6.


on top of it,
you can add transition and other styling effects.
the textual content is to allow you to see that the content under is stable in its-place.
the colorful-backgrounds are for visual containers

This way is a great way of presenting a static information,
but you can see that any click inside the left-opening panel,
will in-fact change the state of the checkbox
(since the label connected to the checkbox is wrapping the entire panel!)
and will close the panel back…

You can improve (with some increased complexity) this behavior,
by not wrapping the panel with the label, but placing the panel after the label
and provide some additional rules, using CSS’ + yourpanel,
to explicitly set the position of the panel,
this way the label is just there to wrap the menu-icon (but it will be too complicated for a quick-example).


also available in here:
https://gist.github.com/eladkarako/f4c06886021f39c70f01e42cf440bdc3.