Виїжджає меню на css

І знову ДЕМО. для початку.

Почнемо мабуть з HTML -Структури:

input нам необхідний для визначення видимості меню: тобто якщо він обраний, то меню видно і навпаки.

label - це наша кнопка-бургер, яка прив'язана до інпут.

ul - сам блок меню.

Тепер CSS (писав тільки для WebKit-браузер: Opera 16+, Safari, Chrome).

Тут багато роздолля для креативних людей, але головні параметри - це width і left. Він повинен мати однакове значення, але left при цьому є негативним. Тим самим ми ховаємо нашу меню зліва від екрану. Також додав анімацію transition: left .2s для краси процесу виїзду з-за меж екрану.

Його просто робимо невидимим.

Оформляти також можна як завгодно. Я зробив просто сіру кнопку з білими смужками в лівому верхньому кутку. Сюди теж додав анімації для самої кнопки і для смужок (просто для краси).

Тепер, так звана «магія»:

CSS3-селектори дозволяють нам визначати стан чекбокса і застосовувати, в залежності від цього ті чи інші властивості для сусідніх елементів: checked

В даному прикладі ми при «чекнуть» інпут зрушуємо кнопку меню .hidden-menu-ticker: checked

btn-menu вліво на 160 пікселів, меню до лівого краю .hidden-menu-ticker: checked

hidden-menu. Інші стилі написані для смужок кнопки меню, щоб вони при натисканні перетворювалися в хрестик і навпаки.