There are many ready-made solutions for creating such panels with jQuery, separate plugins and modules for various systems site management.
This is all very good, but is it possible, to implement side slide panels, to manage exclusively using CSS? Yes, you certainly may! But be careful))), keeping in mind that not all browsers support modern CSS3 properties equally well.

Not so long ago, I “gave up” a solution and an example of work. One of the first comments was: "let's move it to the side ...". Why not? Let's)).

Today I will tell and show with an example how, with the help of “CSS magic”, you can make a menu, quite functional, on click.
To begin with, according to the established tradition, we are watching a live example of the operation of the panel, then, together with those who need it, we will consider the whole alignment, what, how and why. Anticipating questions, I prepared options for the location of the menu, both on the left and on the right:

HTML markup

Let's start the analysis with the panel switch, for which we use the standard checkbox ():

We place the checkbox at the top of the document, preferably right after the tag . We write the hidden attribute, directly indicating the "hidden" state of this element, and also assign a unique identifier, id="nav-toggle", for example, to link with the for attribute of the tag , which we will style and use as a panel toggle button.

I used the tag as a wrapper for the content of the sidebar