У меня есть простой HTML, CSS веб-сайт, который также использует JavaScript для анимированной навигации только на мобильном сайте.
Текущая навигация
HTML для кнопки:
<div class="navigations">
<div class="left">
<div class="leftinner" id="left">
<i class="fas fa-arrow-left"></i>
<span id="lefttext">CONTACT</span>
</div>
</div>
<div class="right">
<div class="rightinner" id="right">
<i class="fas fa-arrow-right"></i>
<span id="righttext">WEBSITE</span>
</div>
</div>
</div>
Когда пользователь нажимает на кнопку контакта, он запускает функцию JS, которая выполняет следующие действия:
document.getElementById('main').classList.add('slideright');
document.getElementById('left').style.display = 'none';
У меня возникает проблема, когда пользователь нажимает кнопку CONTACT, она также вызывает кнопку ВЕБ-САЙТА, почти как если бы кнопка ВЕБ-САЙТА имела скрытое перекрытие над кнопкой КОНТАКТ. Я попытался использовать Flex Box, Float влево, Float влево и вправо, Показать встроенный блок, Показать таблицу с ячейкой таблицы, Столбец et c. Проблема сохраняется только на Chrome для Android, но отлично работает на iPhone и других браузерах.
Как лучше всего решить эту проблему?
Извинения, могу ли я По причинам, связанным с NDA, делимся не только скриншотом.
Редактировать
Вот CSS для кнопок навигации, здесь используется поплавок влево и вправо.
.navigations .left {
width: 50%;
height: 100%;
z-index: 500;
display: block;
float: left;
}
.navigations .left .leftinner {
background-color: #ffcb05;
border-top: 6px solid #000;
border-right: 3px solid #000;
width: 100%;
height: 100%;
display: inline-block;
}
.navigations .right {
width: 50%;
height: 100%;
z-index: 500;
display: block;
float: right;
}
.navigations .right .rightinner {
background-color: #ffcb05;
border-top: 6px solid #000;
border-left: 3px solid #000;
width: 100%;
height: 100%;
display: inline-block;
}