All geek questions in one place

How to create sticky drop-down menu in pure CSS?

The effect I am trying to achieve is:

The new version of Twitter has implemented a “sticky” drop-down menu for the account settings area.

Basically, when you click on your username in the black global navigation bar at the top, the menu switches openly and remains open until you click on one of the links or your username again to close it.

I would like to achieve the exact effect of a sticky menu using only CSS and HTML. I'm fine using CSS3 features, but if this can be achieved without relying on CSS3, it's even better.

What have i tried so far

I can create a main navigation menu with a drop-down list that works with pure CSS and HTML, but using only the: hover pseudo-class. I tried: active pseudoclass, but unfortunately it does not “stick” and remains open.

Is this sticky dropout effect even possible without relying on javascript? If this is not possible without relying on javascript, how should I handle this so that it degrades gracefully?

+3
source share
3 answers

, . , script . , .

, , CSS; , . :hover/:active , .

Javascript , . onclick div, (return false onclick, ). div , , , , Javascript, , .

+4

pseudo :focus :active. tabindex="" HTML, .

iOS tabindex="".

+1

Source: https://habr.com/ru/post/1767077/

More articles:


All Articles