Блог

Существует один способ преобразовать меню боковой панели в меню бургера с помощью Bulma.

С помощью меню навигационной панели (горизонтальное сверху) я могу сделать это очень легко с помощью этого кода:

HTML

 <nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a href="#" class="navbar-item">
      <img src="https://bulma.io/images/bulma-logo-white.png" width="112" height="28">
    </a>
    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbar-example">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbar-example" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item is-tab">Home</a>
      <a class="navbar-item is-tab ">Features</a>
      <a class="navbar-item is-tab">Documentation</a>
    </div>
    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-light">
            Log in
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>
  

JS

   const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
  if ($navbarBurgers.length > 0) {
    $navbarBurgers.forEach( el => {
      el.addEventListener('click', () => {
        const target = el.dataset.target; const $target = document.getElementById(target);
        el.classList.toggle('is-active');
        $target.classList.toggle('is-active');
      });
    });
  }
  

Я хочу устранить это navbar , использовать только мое боковое меню и преобразовать его в бургер на маленьких экранах.

Я пытаюсь это сделать и не работает:

HTML

 <div class="columns is-fullheight">
    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbar-example">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
    
    <aside class="sidebar">
      <nav id="navbar-example" class="menu">
  <p class="menu-label">
    Liturgia
  </p>
  <ul class="menu-list">
    <li>
      <a class="is-active">Breviario</a>
      <ul>
        <li><a class="action" id="mixto">Mixto</a></li>
        <li><a class="action" id="oficio">Oficio</a></li>
      </ul>
    </li>

    <li>
      <a class="is-active">Misa</a>
      <ul>
        <li><a class="action" id="lecturas">Lecturas</a></li>
        <li><a class="action" id="rito">Rito completo</a></li>
      </ul>
    </li>

  </ul>
  <p class="menu-label">
    Tradición
  </p>
  <ul class="menu-list">
    <li><a class="is-disable">Homilías</a></li>
    <li><a class="action" id="comentarios">Comentarios</a></li>
  </ul>
  <p class="menu-label">
    Hagiografía
  </p>
  <ul class="menu-list">
    <li><a  href="https://www.deiverbum.org/liturgia-diaria/santo-del-dia/">Santo del día</a></li>
  </ul>
      </nav>
</aside>
</div>
  

JS

   const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
  if ($navbarBurgers.length > 0) {
    $navbarBurgers.forEach( el => {
      el.addEventListener('click', () => {
        const target = el.dataset.target; const $target = document.getElementById(target);
        el.classList.toggle('is-active');
        $target.classList.toggle('is-active');
      });
    });
  }
  

Как я могу этого добиться?