Уроки по WordPress

Как сделать адаптивное меню без скриптов (инструкция)

Чаще всего при разработке раскрывающегося мобильного меню применяют пару строк js-кода, который реагирует на клик (равно касание) по кнопке, отвечающей за раскрытие меню. После касания, как правило, скрипт заменяет или добавляет класс к элементам меню, применяя тем самым нужные стили.

В примере ниже, я покажу, как создавать подобные меню без использования js. На чистом html+css.

Итак. Начнем с html-кода меню. Оно должно быть таким

Как вы наверное догадались — вся магия будет на чекбосах. Т.е мы связали поля input и label между собой. Далее логика будет такой. Если чекбос отмечен — показываем меню. Если галочка не стоит — скрываем меню.

Разумеется, что сам чекбокс нам не нужно показывать юзеру, поэтому мы скроем его через display:none; Иными словами css у нас будет такого типа:

Я умышленно привел так мало кода, чтобы ничего не отвлекало. Все остальные плюшки созданные посредством css — служат лишь оформлением.


2017-02-02 | | 0 comment | ,

Альтернативный заголовок изображения

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *