@SpideR-KOSS

Почему не работает бургер меню Bulma на телефоне?

Добрый день!

Сделал бургер меню Bulma по официальной документации.

В браузере все прекрасно работает, а на телефоне (iPhone 4s) оно вообще не отображается. Кликаешь на открытие, в браузере открывается, а на телефоне ничего не происходит.

Вот код.
<a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
     <span aria-hidden="true"></span>
     <span aria-hidden="true"></span>
     <span aria-hidden="true"></span>
</a>

<div class="navbar-menu" id="navMenu">

      <a class="navbar-item">
          Пункт 1
       </a>

       <a class="navbar-item">
          Пункт 2
       </a>

       <a class="navbar-item">
          Пункт 2
       </a>
</div>


<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', () => {

        // Get all "navbar-burger" elements
        const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

        // Check if there are any navbar burgers
        if ($navbarBurgers.length > 0) {

            // Add a click event on each of them
            $navbarBurgers.forEach(el => {
                el.addEventListener('click', () => {

                    // Get the target from the "data-target" attribute
                    const target = el.dataset.target;
                    const $target = document.getElementById(target);

                    // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
                    el.classList.toggle('is-active');
                    $target.classList.toggle('is-active');

                });
            });
        }

    });
</script>


Стили стандартные.

В чем проблема?
  • Вопрос задан
  • 316 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы