Как адаптировать выпадающие меню под сенсорные экраны?
Добрый вечер! Интересно как адаптируют выпадающие меню для сенсорных экранов?
1. Если делать на чистом css то для экранов без сенсорного касания мы ставим :hover , а с сенсорным на что меняют? Самое логичное что я нашёл это менять на :active но тогда открывать кликая на элемент а закрывать кликом на любой другой элемент кроме него, может я что-то забыл подскажите что ещё можно для адаптации css?
2. Если делать на js через windows.onclick и .contains то это выглядит как костыль который будет проверять каждый клик мышки?
cssfish, 1. прятать меню за бургером, ты имеешь в виду делать так?
<div class="burger">
<div class="menu">
</div>
Если да, то в этом и костыль с 1 пункта что нужно искать нажатие не на него в js, с помощью ховер на тач экранах не работает когда после открытия снова нажать на гамбургер.
2. Не понятно, какой пункт, какая ссылка.
TheSnegok,
нет, я имею виду делать показ самого меню с помощью гамбургера. а что во что заворачивать тут неважно. при этом то что на десктопе скрыто за ховером, тут показывать сразу. и проблема отпадает.
cssfish, вопрос в том как сделать меню чтобы при клике на гамбургер оно выпадало, а потом снова при клике на гамбургер или на другие элементы оно пряталось, вот вопрос, с помощью ховер при нажатии на гамбургер когда меню открыто оно не закроется, да и любого другого псевдокласса.
TheSnegok, если хотите на чистом css то можно с помощью скрытого checkbox это сделать, стили пишутся без проблем, типа
input ~ menu { // скрыто}
input:checked ~ menu { // показано }
Т.е. отработает и вперед и назад корректно.
Недавно тут был похожий вопрос, но там человек хотел даже без чекбокса.
А как по мне, лучше это делать на js отслеживая клик на гамбургере.
cssfish, чекбокс это костыль, да и скрывать меню когда ты нажимаешь на другой элемент не будет, на js тоже костыльно когда проверяешь каждый клик нажал ли юзер на гамбургер или меню или нет
cssfish, я вам 5 раз пишу , внимательней пожалуйста, вот вы открыли меню и хотите нажать на что-то другое чтобы закрыть его, получается нужно проверять любой клик, элемент конкретный тут ни при чём!
TheSnegok, если хотите закрывать при клике на что угодно - да, проверять любой клик. Тогда и чекбокс не нужен и вообще все проще, когда логика на js. Формулируйте изначально конкретнее и ответы будут яснее.
Простой
Средний
Простой