Мобильная навигация - Не работает при касании

Я пытаюсь сделать мой сайт доступным через мобильный телефон и расположил его под определенным размером, панель меню наверху превращается в выпадающее меню. К сожалению, он работает с зависанием, поэтому, когда я пытаюсь использовать его на мобильном телефоне, ничего не происходит. Может ли кто-нибудь предложить, как я изменил бы код, чтобы заставить его работать с прикосновением?Мобильная навигация - Не работает при касании

HTML

<nav id="nav_mobile" role="navigation"> 
    <ul> 
     <li><a href="#" id="current">Home</a></li> 
     <li><a href="#">News</a></li> 
     <li><a href="#">Gallery</a></li> 
    </ul> 
</nav>

CSS

#nav_mobile { 
    position: relative; 
    padding-top: 2%; 
    margin: 0px auto; 
} 
#nav_mobile ul { 
    width: 100%; 
    text-align: center; 
    position: absolute; 
    background: #F8F8F8; 
    min-height: 50px; 
    background-image: url('../img/Menu_button.png'); 
    background-repeat: no-repeat; 
    background-position: 50% 0%; 
} 
#nav_mobile li { 
    display: none; 
    margin: 0; 
    border-bottom: 1px solid #ceced6; 
    background: #070707; 
} 
#nav_mobile #current { 
    display: block; 
} 
#nav_mobile a { 
    display: block; 
} 
#nav_mobile #current a { 
    background: none; 
    color: #666; 
} 
#nav_mobile ul:hover { 
    background-image: none; 
} 
#nav_mobile ul:hover li { 
    display: block; 
}

Днем включить JQuery в коде, если мне нужно, но я хотел бы, чтобы это просто CSS, если я могу.

EDIT Я изменил наведение на активный и добавил ontouchstart = "" в тег тела. В результате меню теперь активируется, но не остается активным достаточно долго, чтобы вы могли выбрать ссылку.

источник

2015-05-10 Tessa

http://stackoverflow.com/questions/6063308/touch-css-pseudo-class-or-something-similar – Dmitriy

Привет, извините. Я посмотрел на этот пост, но поскольку он включает в себя java-скрипт, с которым я не знакомы, я не мог сделать голову и хвост. Не могли бы вы сообщить мне, на что я должен смотреть? – Tessa

см. Ответ Nilesh Mahajan – Dmitriy

Используйте :active pseudoclass. Он должен работать, но в некоторых браузерах вам нужен небольшой хак, чтобы заставить его работать: присоединить обработчик события к событию touchstart на теле (ex:<body ontouchstart="">)

источник

2015-05-10 15:42:54

Привет, я пробовал использовать активный, но он не работает ... что такое ontouchstart? добавить его к телу так же, как вы его написали? – Tessa

– Dmitriy

Привет, спасибо, я пробовал это. Теперь выпадающее меню активируется, но вы не можете его щелкнуть, потому что когда вы берете палец мыши (на компьютере) или останавливаете нажатие кнопки меню (на мобильном телефоне), тогда меню исчезает :-( – Tessa

Вы можете создать 2 отдельных меню - один для регулярные экраны и один для мобильных устройств и сделать что-то вроде этого:

#nav_mobile {display: none;} 

@media (max-width: 480px) { 
    #nav_mobile {display: inline-block;} 
    #nav_regular {display: none;} 
}

источник

2015-05-10 15:51:30 Rose

Привет, у меня уже есть это, я просто не публиковал детали, потому что мое экранное меню прекрасно работает , это только мое раскрывающееся меню для небольших экранов, которое не работает. – Tessa

Существует хороший учебник, который я использовал до этого из css-трюков: https://css-tricks.com/convert-menu-to-dropdown/ – Rose

Он создает мобильное меню прокрутки, хотя – Rose

Мобильная навигация - Не работает при касании

ответ

Смежные вопросы