Бічні меню. висуваються при натисканні, останнім часом широко використовуються розробниками сайтів. Найвідоміше, на даний момент, це звичайно ж меню навігації, упаковане під кнопки в стилі «гамбургер». Напевно кожен з вас хоча б раз зустрічав в інтернетах сайт, на якому збоку, праворуч або ліворуч, красується кнопа такого виду: ☰. при кліці на яку і з'являється (висувається) панелька з вертикальним меню.
Існує маса готових рішень для створення таких панелей за допомогою jQuery, окремі плагіни та модулі для різних систем управління сайтом. Це все дуже навіть добре, але чи можна, для реалізації бічних слайд-панелей обійтися виключно засобами CSS? Звичайно можна! Але обережно))), з оглядкою на те, що не всі браузери однаково добре підтримують сучасні властивості CSS3.
Сьогодні розповім і покажу на прикладі, як за допомогою «магії CSS» можна забабахати, цілком собі функціональне, бічне меню, висувається при натисканні. Для початку, по заведеної традиції, дивимося живий приклад роботи панелі, далі, разом з тими кому воно треба, розглянемо весь розклад, що, як і навіщо. Передбачаючи питання, приготував варіанти розташування меню, як зліва, так і справа:
HTML-Розмітка
Почнемо розбір з перемикача панелі, в якості якого використовуємо стандартний прапорець (checkbox):
Володіємо чекбокс в верхній частині документа, краще відразу після тега
. Прописуємо атрибут hidden. безпосередньо вказуючи стан «прихований» у даного елемента, а так же дамо унікальний ідентифікатор, id = "nav-toggle" наприклад, для зв'язки з атрибутом for тега
