Как сделать выпадающее по клику меню на CSS?

Question

[Lici]

Инет полон примеров выпадающих по наведению меню на CSS, как сделать такое-же, но выпадающее по клику? Тут уже :hover не поможет.

Answer 1

[Максим Гречушников]

вешай display: block на событие :focus

Answer 2

[Нурсултан Молдобаев]

https://www.google.com/webhp?sourceid=chrome-insta...

первая же ссылка
web.izjum.com/css-open-on-click

Answer 3

[deleted-tnorman]

Недавно лепил нечто такое.
Вариант без JS.

Прячешь чекбокс, сразу после него элемент, который должен разворачиваться.
Далее делаешь для чекбокса лейбл отдельный и по нажатию на него включаешь \ выключаешь спрятанный чекбокс.
Таким образом получаешь триггер который фиксируется в одном из двух положений.

Далее селектором отлавливаешь объект стоящий после чекбокса в зависимости от состояния чекбокса вкл \ выкл

.check + .field{
стили класса field при не отмеченном чекбоксе стоящем перед ним
}

.check:checked + .field{
стили класса field при отмеченном чекбоксе стоящем перед ним
}

вариант не универсальный (новый зависимый элемент = новый чекбокс + новый стиль)

<div class="search">
            <label class="glyphicon glyphicon-search" for="searchButton"></label>
            <input type="checkbox" class="check" id="searchButton"/>
            <input class="field" name="searchInput" placeholder="Найти..."/>
        </div>

Answer 4

[Юрий Лобанов]

Не извращайтесь, рано еще полагаться в таких вещах на css.
По теме, кроме focus гуглите menu css target.
Например css-tricks.com/off-canvas-menu-with-css-target
У меня codepen не работает, так что вот пример на фидлу перенес
jsfiddle.net/iiil/o9okyw1d

Answer 5

[Тимур Сергеевич]

Использовать js