@krov119

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

Здравствуйте. Есть такой выпадающий список, можно ли только средствами CSS(без js) сделать так чтобы он закрывался по клику на пустую область экрана?
  • Вопрос задан
  • 317 просмотров
Решения вопроса 2
profesor08
@profesor08 Куратор тега CSS
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;
}
Ответ написан
Можно попробовать реализовать через :target.

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

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

Но запаритесь с позиционированием самого меню, js поддерживают почти все браузеры
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы