Сделать так, чтобы кнопка мгновенно открывала меню

Я хочу, чтобы мое мобильное меню открывалось, как только пользователь коснется кнопки. Я использовал ontouchstart="" в обеих кнопках, чтобы создать наложение на контент, когда меню offcanvas видимо, и это работает, как только пользователь касается любой кнопки. Я бы хотел, чтобы это работало точно так же и для href="javascript:void(0), который открывает меню. Вот веб-сайт: https://londontradition.com, вы можете увидеть, как только коснетесь кнопки меню, наложение станет видимым, однако переход в меню не начнется, пока вы не уберете палец. Спасибо за любую помощь.

Пример того, как это работает, приведен здесь: https://www.ssense.com/.

Вот html для моей кнопки закрытия меню:

<a href="javascript:void(0);" class="mobile-button visible-sm visible-xs" id="close-btn" ontouchstart="document.getElementById('content').style.cssText = 'opacity:1;';">Menu</a>

А вот html для моей кнопки открытия меню:

<div class="col-sm-3 col-xs-3"><a href="javascript:void(0);" class="mobile-button" id="menu-toggle" ontouchstart="document.getElementById('content').style.cssText = 'opacity:0.1;';">Menu</a></div>

mobile javascript html touchstart
person Kumar Patel    schedule 01.04.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вместо использования ontouchstart вы должны использовать событие onmouseover. Подробнее см. здесь. Кроме того, вы должны реализовать функцию, чтобы вернуть его в нормальное состояние, когда мышь больше не наводит на него через onmouseout.

Вот как должен выглядеть ваш код:

<a href="javascript:void(0);" class="mobile-button visible-sm visible-xs" id="close-btn" onmouseover="document.getElementById('content').style.cssText = 'opacity:1;';" onmouseout="document.getElementById('content').style.cssText = 'opacity:0.1;';">Menu</a>
person d_z90    schedule 01.04.2016
comment
Здравствуйте, возможно, вы неправильно поняли мой вопрос. Ontouchstart= — это часть, которая работает, и это показывает мой оверлей. Я хотел бы, чтобы это работало над href=javascript:void(0); так же, как и наложение. - person Kumar Patel; 01.04.2016

arrow_upward
0
arrow_downward

Я сам нашел решение для всех, кто также ищет ответ.

Что я сделал, так это добавил это к моей кнопке открытия меню:

ontouchstart="document.getElementById('sidebar').style.cssText = 'transform: translateX(0px) !important;';document.getElementById('wrapper').style.cssText = 'transform: translateX(225px) !important;';document.getElementById('top-bar').style.cssText = 'transform: translateX(225px) !important;';document.getElementById('content').style.cssText = 'opacity:0.2;';"

и это к моей кнопке закрытия меню:

ontouchstart="document.getElementById('sidebar').style.cssText = 'transform: translateX(-225px) !important;';document.getElementById('wrapper').style.cssText = 'transform: translateX(0px) !important;';document.getElementById('top-bar').style.cssText = 'transform: translateX(0px) !important;';document.getElementById('content').style.cssText = 'opacity:1;';"

как только пользователь коснется кнопки пальцем, еще до того, как он уберет палец, меню начнет появляться.

person Kumar Patel    schedule 02.04.2016