L
L
Lici2014-09-02 12:23:03
css
Lici, 2014-09-02 12:23:03

How to make a clickable dropdown menu in CSS?

The Internet is full of examples of CSS dropdown menus on hover, how to make the same, but dropdown on click? Here already :hover will not help.

Answer the question

In order to leave comments, you need to log in

5 answer(s)
M
Maxim Grechushnikov, 2014-09-02
@maxyc_webber

put display: block on the :focus event

N
Nursultan Moldobaev, 2014-09-02
@Diyahon

https://www.google.com/webhp?sourceid=chrome-insta...
first link
web.izjum.com/css-open-on-click

D
deleted-tnorman, 2014-09-03
@deleted-tnorman

Recently sculpted something like this.
Option without JS.
You hide the checkbox, right after it, the element that should unfold.
Next, you make a separate label for the checkbox and by clicking on it you turn on / off the hidden checkbox.
Thus, you get a trigger that is fixed in one of two positions.
Then, using a selector, you catch the object after the checkbox, depending on the state of the checkbox on / off
.check + .field{
field class styles when the checkbox in front of it is not checked
}
.check:checked + .field{
field class styles when the checkbox in front of it is checked
}
option is not universal (new dependent element = new checkbox + new style)

<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>

Y
Yuri Lobanov, 2014-09-02
@iiil

Do not be perverted, it's too early to rely on css in such things.
On the topic, apart from focus google menu css target .
For example css-tricks.com/off-canvas-menu-with-css-target
Codepen doesn't work for me, so here's an example on fiddle
jsfiddle.net/iiil/o9okyw1d

T
Timur Sergeevich, 2014-09-02
@MyAlesya

use js

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question