Има много готови решения за създаване на такива панели с jQuery, отделни плъгини и модули за различни системиуправление на сайта.
Всичко това е много добре, но възможно ли е да се внедрят странични плъзгащи се панели, които да се управляват изключително използвайки CSS? Да, със сигурност можете! Но бъдете внимателни))), имайки предвид, че не всички браузъри поддържат еднакво добре модерни CSS3 свойства.

Не толкова отдавна се „отказах“ от решение и пример за работа. Един от първите коментари беше: "хайде да го преместим настрани ...". Защо не? Нека да)).

Днес ще разкажа и покажа с пример как с помощта на „CSS магия“ можете да направите меню, доста функционално, на щракване.
Като начало, според установената традиция, гледаме пример на живо за работата на панела, след което заедно с тези, които се нуждаят от него, ще разгледаме цялото подреждане, какво, как и защо. Предвиждайки въпроси, подготвих опции за местоположението на менюто, както отляво, така и отдясно:

HTML маркиране

Нека започнем анализа с превключвателя на панела, за който използваме стандартното квадратче за отметка ():

Поставяме отметката в горната част на документа, за предпочитане точно след етикета . Пишем скрития атрибут, като директно указваме "скритото" състояние на този елемент и също така присвояваме уникален идентификатор, id="nav-toggle", например, за връзка с атрибута for на тага , който ще стилизираме и ще използваме като бутон за превключване на панела.

Използвах етикета като обвивка за съдържанието на страничната лента