Доброго времени суток уважаемые читатели. На сегодняшний день большинство техник создания меню-гармошки включают в себя использование псевдо-класса :target
. Проблема использования :target
заключается в невозможности закрыть какой либо блок в нашем меню, работать будет только «рыскрытие» гармошки.
Пример 1: раскрывающийся список (checkbox)
Пример 2: схлопывающийся список (radio)
Поэтому хочется показать Вам пример реализации Accordion меню на чистом CSS с помощью псевдо-класса :checked
. С помощью этого метода у Вас появиться возможность контролировать открытие/закрытие блоков. Меню будет двух типов: полностью раскрывающееся и отображение одного блока при схлопывании других. Использовать будет checkbox
и radio
соответственно.