Sidebar retractabil pe css pur

Meniul lateral. retractabil click-through, ea a fost recent utilizat pe scară largă de către dezvoltatorii de site-uri. Cel mai faimos în acest moment, este de meniu de navigare, desigur, ambalate sub butonul din „hamburger“ stil. Cu siguranță fiecare dintre voi, cel puțin o dată apariție pe site-ul de internet pe care parte, dreapta sau la stânga, flaunts Knop de acest tip: ☰. atunci când faceți clic pe faptul că, și există (nominalizat) soclu cu meniu vertical.

Există o mulțime de soluții gata făcute pentru crearea unor astfel de panouri cu ajutorul jQuery, individuale plug-in-uri și module pentru o varietate de sisteme de management al conținutului.
Este foarte bine, dar dacă este posibil să se pună în aplicare panouri laterale glisante dispenseze în întregime cu CSS? Desigur, puteți! Dar fii atent))), cu un ochi la faptul că nu toate browserele sunt la fel de bine întreținute CSS3 proprietate modernă.


Sidebar retractabil pe css pur

Astăzi va spune și arată de exemplu, modul de utilizare a „CSS Magic» poate zababahat, este în prezent funcțional, bara laterală, retractabil făcând clic.
Pentru a începe cu, în conformitate cu tradiția zavedonnoy, uita-te exemplu plin de viață a panoului de operare, etc, împreună cu cei cărora le este necesar să se ia în considerare întregul echilibru a ceea ce, cum și de ce. Anticipând întrebări pregătite meniu de opțiuni de locație, atât la stânga și la dreapta:

HTML-Layout

Pentru a începe analiza de la comutatorul de panou, care folosesc ca o cutie standard de (checkbox):

Avem o casetă de selectare în partea superioară a documentului, imediat după eticheta mai bine . Prevede atributul ascuns. indică în mod direct starea de „ascuns“ în acest articol, precum și atribuie un identificator unic, id = „nav-comutare“, de exemplu, pentru o grămadă de etichete pentru atribut

Deoarece conținutul de ambalaje tag-ul utilizat bara laterală