Блог

У меня есть навигационная панель bulma, которой я манипулирую с помощью react. Ниже приведен сгенерированный код. На рабочем столе меню отображается корректно и открывает и закрывает выпадающие меню, как и ожидалось.

Однако на мобильных устройствах все выпадающие списки открыты по умолчанию, и хотя класс «is-active» добавляется и удаляется, когда я нажимаю на «navbar-link», меню открывается и закрывается не так, как ожидалось.

 <nav class="navbar" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
      <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbar">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      </a>
   </div>
   <div id="navbar" class="navbar-menu is-active">
      <div class="navbar-start">

         <div class="navbar-item has-dropdown">
            <a class="navbar-link">Data Types</a>
            <div class="navbar-dropdown">
               <div class="types">
                  Select Content
               </div>
            </div>
         </div>
      </div>
   </div>
</nav>
  

«Активен» в приведенном выше коде из меню burger открывает меню. Что я делаю не так?

Мне нужно было добавить дерзости

 .navbar-item {
    amp;.has-dropdown {
      .navbar-dropdown {
        display: none;
      }
      amp;.is-active {
        .navbar-dropdown {
          display: block;
        }
      }
   }
}
  

в разделе @mobile в моем sass. Тогда мобильное устройство ведет себя как рабочий стол.

Для меня это СРАБОТАЛО как шарм —>

         /** The jQuery will trigger only at mobile viewport */
    if (window.matchMedia("(max-width: 767px)").matches) {    
            const $navDropdowns = document.querySelectorAll(".navbar-item.has-dropdown");
        if ($navDropdowns.length > 0) {
            // HIDE THE DROP-DOWN ON THE INITIAL LOAD
            $navDropdowns.forEach((el) => {
                const target = el.dataset.target;
                const $target = document.getElementById(target);
                $target.style.display = "none";
        
            //Register the click event on the dropdown list
                el.addEventListener("click", () => {
                    // Get the target from the "data-target" attribute
                    const target = el.dataset.target;
                    const $target = document.getElementById(target);
    
                    if ($target.style.display === "block") {
                        $target.style.display = "none";
                    } else {
                        $target.style.display = "block";
                    }
                });
            });
        }
}
    
  

Свернутое меню

Расширенное меню

Вот HTML для навигационной панели:

 <nav class="navbar" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <a class="navbar-item" href="https://bulma.io">
                <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" />
            </a>

            <a role="button" class="navbar-burger" @click="toggle" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>

        <div id="navbarBasicExample" class="navbar-menu">
            <div class="navbar-start">
                <a class="navbar-item">
                    Home
                </a>

                <a class="navbar-item">
                    Documentation
                </a>

                <div data-target="more" class="navbar-item has-dropdown is-hoverable">
                    <a class="navbar-link">
                        More
                    </a>

                    <div class="navbar-dropdown" id="more">
                        <a class="navbar-item">
                            About
                        </a>
                        <a class="navbar-item">
                            Jobs
                        </a>
                        <a class="navbar-item">
                            Contact
                        </a>
                        <hr class="navbar-divider" />
                        <a class="navbar-item">
                            Report an issue
                        </a>
                    </div>
                </div>

                <div data-target="new" class="navbar-item has-dropdown is-hoverable">
                    <a class="navbar-link">
                        New
                    </a>

                    <div class="navbar-dropdown" id="new">
                        <a class="navbar-item">
                            About
                        </a>
                        <a class="navbar-item">
                            Jobs
                        </a>
                        <a class="navbar-item">
                            Contact
                        </a>
                        <hr class="navbar-divider" />
                        <a class="navbar-item">
                            Report an issue
                        </a>
                    </div>
                </div>
            </div>

            <div class="navbar-end">
                <div class="navbar-item">
                    <div class="buttons">
                        <a class="button is-primary">
                            <strong>Sign up</strong>
                        </a>
                        <a class="button is-light">
                            Log in
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </nav>
  

Обратите внимание на data-target=»больше», data-target=»новый» и идентификаторы, переданные в дочерних элементах. Кстати, это реализация в приложении Vuejs, но это будет работать везде.

Код css скрывает только выпадающие ссылки, но вы больше не можете получить к ним доступ на мобильных устройствах.

Я также столкнулся с этой проблемой, поэтому решил попробовать Buefy. Это не совсем чистый ответ Bulma, но по умолчанию его можно считать закрытым, и он сработал с первого раза.

Я использую Nuxt, изначально с Bulma в качестве модуля nuxtjs, и установка / преобразование из Bulma в Buefy было простым:https://buefy.org/documentation/start/#nuxtjs.

Для совершенно новой интеграции я удалил модуль Bulma из nuxt-config, удалил node_modules/package-lock.json и следовал приведенному выше руководству.

Я изменил компонент навигационной панели Buefy в соответствии со своими требованиями, и он просто работает — правильно отображает / скрывает выпадающий список, а также автоматически добавляет правильные атрибуты Aria:

   <template>
  <b-navbar>
    <template slot="brand">
      <h1>
        <nuxt-link to="/" class="navbar-item is-size-4" id="homelink">
          Brand link here
        </nuxt-link>
      </h1>
    </template>

    <template slot="end">
      <b-navbar-item tag="div">
        <div class="buttons">
          <nuxt-link class="navbar-item" to="/projects">Projects</nuxt-link>
          <nuxt-link class="navbar-item" to="/about">About/Contact</nuxt-link>
        </div>
      </b-navbar-item>
    </template>
  </b-navbar>
</template>
  

По умолчанию $navbar-breakpoint установлено значение прерывания на $desktop .

Вы можете переопределить исходные переменные bulma в своих собственных, mystyles.scss как описано в bulma здесь https://versions.bulma.io/0.7.0/documentation/overview/customize /. Это может выглядеть примерно так, если вы никогда не хотите, чтобы оно ломалось: $navbar-breakpoint: 0px

Основываясь на ответе @ psykx, я пришел к следующему:

 @charset "utf-8";
@import "./bulma/bulma";
@include mobile{
    .navbar-item {
        amp;.has-dropdown {
            .navbar-dropdown {
                display: none;
            }
            amp;.is-active {
                .navbar-dropdown {
                    display: block;
                }
            }
        }
    }
}

  

Работает очень хорошо.