Адаптивное меню гамбургеров не работает на мобильном сафари - PullRequest
Новая
       7

Адаптивное меню гамбургеров не работает на мобильном сафари

0 голосов
/ 17 января 2019

Я ходил кругами в поисках решения проблемы, о которой я никогда не думал, что она может существовать в 2019 году.

Я занят созданием сайта и использовал меню Гамбургер для экранов меньшего размера. Все выглядит хорошо в инструментах Google Dev для нескольких устройств, но после того, как я проведу реальный тест на своем iPhone, меню гамбургеров устарело, и стиль "Заказать сейчас!" кнопка испортилась?

Есть ли простой способ изменить css или JS, чтобы сайт мог работать на ios?

Это мой код: 

document.addEventListener("click", function (e) {
  if (e.target.id === "burger-time") {
    document.querySelector('nav').classList.add('open');
    document.getElementById('burger-time').style.visibility = 'hidden';
  } else {
    document.querySelector('nav').classList.remove('open');
    document.getElementById('burger-time').style.visibility = 'visible';
  }
});
#header-nav-background {
  display: block;
  background-color: rgb(31, 70, 189);
  background-color: rgba(31, 70, 189, .5);
  height: 54px;
  width: 100%;
}

#header-ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(31, 70, 189);
  background-color: rgba(31, 70, 189, 1);
  z-index: 1200;
}

.button-style {
  font-size: 20px;
  font-family: 'Roboto', sans-serif;
}

#burger-time{
  position: absolute;
  visibility: hidden;
}

@media screen and (max-width: 669px) and (min-width: 300px) {
  .header {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 1);
    border-bottom: 5px solid #02b3e4;
    border-bottom-style: none;
  }
  nav {
    width: 140px;
    height: 400px;
    -webkit-transform: translate(-565px, 0);
    -ms-transform: translate(-140px, 0);
    -moz-transform: translate(-140px, 0);
    -o-transform: translate(-140px, 0);
    transform: translate(-140px, 0);
    -webkit-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
  }
  .hidden {
    visibility: hidden;
  }

  .li .a {
    display: block;
    color: white;
    padding: 11px 45px 19px 0;
    text-decoration: none;
    width: 100%;
  }

 /* Change the link color to rgba(31, 70, 189, 1) on hover */
  .li .a:hover {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    color: rgb(31, 70, 189);
    color: rgba(31, 70, 189, 1);
    text-shadow: 1px 1px 0 black;
    background-color: white;
  }

  .button-style {
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
  }

  #header-nav-background {
    display: block;
    background-color: rgb(31, 70, 189);
    background-color: rgba(31, 70, 189, 1);
    height: 54px;
  }

  #burger-time{
    position: absolute;
    visibility: visible;
    display: flex;
    padding: 0 2px 2px 0;
    font-size: 52px;
    transform: translate(140px, 0);
    color: white;
    text-shadow: 2px 2px 2px black;
  }

  #burger-time:hover {
    text-decoration: none;
    color: rgb(31, 70, 189);
    color: rgba(31, 70, 189, 1);
    font-weight: 600;
    background-color: white;
    text-shadow: 1px 1px 1px black;
  }
  
}
<div id="header-nav-background">
  <nav>
    <ul id="header-ul">
      <li class="li button-style"><a class="a" href="index.html">Home</a></li>
      <li class="li button-style">
        <a class="a" href="services.html">Services</a>
      </li>
      <li class="li button-style"><a class="a" href="about.html">About</a></li>
      <li class="li button-style">
        <a class="a" href="contact.html">Contact us</a>
      </li>
      <i id="burger-time" class="material-icons">menu</i>
    </ul>
  </nav>
</div>

Сайт находится в стадии разработки, но вы можете посмотреть здесь: http://www.encoreservices.co.za/ESMS/index.html

Ответы [ 2 ]

0 голосов
/ 21 января 2019

Так что в этом есть немного больше, чем просто различия между "touchend" и "click". Документация MDN содержала несколько полезных комментариев о том, как добавить прослушиватель событий для мобильных устройств!

Раздел лучших практик

Вот несколько рекомендаций, которые следует учитывать при использовании сенсорных событий:

Добавьте обработчики точек касания к определенному целевому элементу (а не ко всему документу или узлам выше в дереве документа).

Очевидно, что не рекомендуется использовать document.addEventListener () для мобильных устройств, а не только для iPhone. Говорят, лучше выбрать купить отдельный элемент. https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Events

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

let rootEvent = document.getElementById("rootElement");

let burgerNav = document.getElementById("burger-time");

burgerNav.addEventListener("click", function(e) {
    document.querySelector('nav').classList.add('open');
    burgerNav.style.visibility ='hidden';
    e.preventDefault();
    e.stopPropagation();


});

closeNav = function(){
    if (burgerNav.style.visibility === "hidden"){
       document.querySelector('nav').classList.remove('open');
       burgerNav.style.visibility ='visible';
    }
};

rootEvent.addEventListener("click", closeNav);
rootEvent.addEventListener("touchend", closeNav);
<html lang="en" dir="ltr" id="rootElement">

Вероятно, это не единственный способ сделать это, но если это сломается муравьем ...

0 голосов
/ 18 января 2019

Хорошо. Итак, после того, как я в течение целого дня гонялся за рассказом, наконец-то появился свет ...

В мобильном IOS нет такого понятия, как «щелчок» в качестве прослушивателя событий, однако «троганный» есть в списке элементов:

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW8

Итак, я проверил это и устроил небольшой праздник, как он работал !!!!! сейчас я только что продублировал код, чтобы он работал, но позже мне придется его переписать. Затем стиль кнопки будет смотреть на это, но позже. 

document.addEventListener("touchend", function(e) {
  if (e.target.id === "burger-time"){
    document.querySelector('nav').classList.add('open');
    document.getElementById('burger-time').style.visibility ='hidden';
  } else {
    document.querySelector('nav').classList.remove('open');
    document.getElementById('burger-time').style.visibility ='visible';
  }
});

document.addEventListener("click", function(e) {
  if (e.target.id === "burger-time"){
    document.querySelector('nav').classList.add('open');
    document.getElementById('burger-time').style.visibility ='hidden';
  } else {
    document.querySelector('nav').classList.remove('open');
    document.getElementById('burger-time').style.visibility ='visible';
  }
});
...