Как стать автором
Обновить

Accordion меню на чистом CSS

Разработка веб-сайтов *CSS *HTML *
Из песочницы
Доброго времени суток уважаемые хабражители. На сегодняшний день большинство техник создания меню-гармошки включают в себя использование псевдо-класса :target. Проблема использования :target заключается в невозможности закрыть какой либо блок в нашем меню, работать будет только «рыскрытие» гармошки.



Пример 1: раскрывающийся список (checkbox)

Пример 2: схлопывающийся список (radio)


Поэтому хочется показать Вам пример реализации Accordion меню на чистом CSS с помощью псевдо-класса :checked. С помощью этого метода у Вас появиться возможность контролировать открытие/закрытие блоков. Меню будет двух типов: полностью раскрывающееся и отображение одного блока при схлопывании других. Использовать будет checkbox и radio соответственно.

Читать дальше →
Всего голосов 22: ↑17 и ↓5 +12
Просмотры 55K
Комментарии 23