Как закрыть выпадающий список по нажатии на произвольную область экрана?

Question

[krov119]

Здравствуйте. Есть такой выпадающий список, можно ли только средствами CSS(без js) сделать так чтобы он закрывался по клику на пустую область экрана?

Answer 1

[profesor08]

input удали, он ненужен, без js ты ему галочку не снимешь. Стили связанные с input тоже удали. Свой .dd-button сделай не div, а button. Далее отталкивайся от самой кнопки, у нее может быть состояние :focus, вот это то что тебе нужно. Если фокус на кнопке, то показывай список, если нет фокуса, то не показывай. Фокус с кнопки снимается при клике на любой посторонний элемент.

<button class="dd-button">Dropdown</button>

.dd-button:not(:focus) + .dd-menu {
  display: none;
} 

.dd-button:focus + .dd-menu {
  display: block;
}

Comments

[Nikita-Fast]

так даже на пункт меню не нажать - почему ?

[krov119]

Аналогично, не нажимаются пункты меню

[Сергей Герасимов]

Nikita-Fast, потому что фокус теряет до того, как проходит клик.

[krov119]

Сергей Герасимов, а Вы не могли бы решение данной проблемы в виде css-кода написать?)

[Сергей Герасимов]

krov119, ниже изложил идею. Пример использования target в песочнице https://codepen.io/una/pen/Gxwogy

[Сергей Герасимов]

krov119, ой, это не та песочница. В общем, вот эта статья https://css-tricks.com/solved-with-css-dropdown-menus/, в ней много способов разложено

[Nikita-Fast]

krov119, решение простое , надо сделать так :

elem:hover + hide,
elem:focus + hide{
  style
}

[profesor08]

Если есть необходимость в том, чтоб меню не пряталось при клике, то надо добавить еще одно простое правило:

.dd-menu:hover {
  display: block;
}

И не надо забывать о приоритетах селекторов, и выстраивать их так, чтоб не было неожиданностей.

[krov119]

Всем большое спасибо!

Answer 2

[Сергей Герасимов]

Можно попробовать реализовать через :target.

При клике на кнопку происходит переход на текущую страницу с якорем (ссылка#якорь). Якорем будет id элемента скрытого с абсолютным (фиксированным) позиционированием на всю страницу и ссылкой на текущую страницу без якоря или другой якорь.

Соответственно при :target элемента он отображается, а на нём отображается необходимое меню.

Но запаритесь с позиционированием самого меню, js поддерживают почти все браузеры