Existuje veľa hotových riešení na vytváranie takýchto panelov s jQuery, samostatné pluginy a moduly pre rôzne systémy správa stránok.
To všetko je veľmi dobré, ale je možné implementovať bočné posuvné panely, riadiť výlučne pomocou CSS? Áno, určite môžete! Ale buďte opatrní))), majte na pamäti, že nie všetky prehliadače podporujú moderné vlastnosti CSS3 rovnako dobre.

Nie je to tak dávno, čo som sa „vzdal“ riešenia a príkladu práce. Jeden z prvých komentárov bol: "presuňme to na stranu ...". Prečo nie? Poďme)).

Dnes poviem a ukážem na príklade, ako pomocou „Kúzla CSS“ môžete kliknutím vytvoriť celkom funkčné menu.
Na začiatok podľa zavedenej tradície sledujeme živý príklad fungovania panelu, potom spolu s tými, ktorí to potrebujú, zvážime celé zosúladenie, čo, ako a prečo. V očakávaní otázok som pripravil možnosti pre umiestnenie menu, vľavo aj vpravo:

HTML značky

Začnime analýzu prepínačom panelov, na ktorý používame štandardné začiarkavacie políčko ():

Zaškrtávacie políčko umiestnime v hornej časti dokumentu, najlepšie hneď za značku . Zapíšeme atribút hidden, ktorý priamo označuje „skrytý“ stav tohto prvku, a tiež priradíme jedinečný identifikátor, napríklad id="nav-toggle", aby sme ho prepojili s atribútom for značky. , ktorý naštylizujeme a použijeme ako tlačidlo na prepínanie panelov.

Tag som použil ako obal obsahu bočného panela