Навигационная панель navbar

Navbar — горизонтальная панель навигации в шапке сайта: логотип, ссылки на разделы, кнопка входа. На узких экранах Bulma прячет ссылки за кнопкой с тремя полосками — бургером. Но открывать меню по нажатию на бургер Bulma не умеет: это делает ваш JavaScript, и он занимает несколько строк.

Части панели

Класс	Что это
`navbar`	Вся панель
`navbar-brand`	Левая часть, видна всегда: логотип и бургер
`navbar-menu`	Меню, которое на узких экранах прячется
`navbar-start`, `navbar-end`	Группы ссылок у левого и правого края
`navbar-item`	Один пункт: ссылка, кнопка, картинка

Панель для широкого экрана

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<nav class="navbar is-primary" aria-label="Главное меню">
  <div class="navbar-brand">
    <a class="navbar-item has-text-weight-bold" href="/">Trattoria Oliva</a>
  </div>
  <div class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item" href="#menu">Меню</a>
      <a class="navbar-item" href="#about">О нас</a>
    </div>
    <div class="navbar-end">
      <div class="navbar-item">
        <a class="button is-light" href="#booking">Забронировать</a>
      </div>
    </div>
  </div>
</nav>

На экране от 1024 px — бирюзовая полоса: название слева, две ссылки рядом, кнопка у правого края. Превью уже 1024 px, поэтому в нём видно только название: navbar-menu скрыт, а открыть его нечем.

Бургер и JavaScript

Добавьте в navbar-brand бургер — ссылку navbar-burger с четырьмя пустыми <span>, из которых CSS рисует полоски. Атрибут data-target хранит id меню, которое бургер открывает:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<nav class="navbar is-primary" aria-label="Главное меню">
  <div class="navbar-brand">
    <a class="navbar-item has-text-weight-bold" href="/">Trattoria Oliva</a>
    <a role="button" class="navbar-burger" aria-label="Открыть меню" aria-expanded="false" data-target="mainMenu">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>
  <div id="mainMenu" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item" href="#menu">Меню</a>
      <a class="navbar-item" href="#about">О нас</a>
    </div>
  </div>
</nav>
 
<script>
  document.querySelectorAll('.navbar-burger').forEach((burger) => {
    burger.addEventListener('click', () => {
      const menu = document.getElementById(burger.dataset.target);
      const isOpen = burger.classList.toggle('is-active');
      menu.classList.toggle('is-active', isOpen);
      burger.setAttribute('aria-expanded', String(isOpen));
    });
  });
</script>

В узком превью справа появились три полоски. Нажмите на них: полоски превращаются в крестик, ниже раскрывается список ссылок. Весь механизм — класс is-active: на бургере он рисует крестик, на navbar-menu показывает меню. Скрипт вешает этот класс по клику и обновляет aria-expanded для программ чтения с экрана.

Выпадающий пункт

Пункт navbar-item has-dropdown is-hoverable раскрывает вложенный список при наведении мыши — без JavaScript:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<nav class="navbar" aria-label="Главное меню">
  <div class="navbar-menu is-active">
    <div class="navbar-start">
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">Меню</a>
        <div class="navbar-dropdown">
          <a class="navbar-item" href="#starters">Закуски</a>
          <a class="navbar-item" href="#pasta">Паста</a>
          <hr class="navbar-divider">
          <a class="navbar-item" href="#wine">Винная карта</a>
        </div>
      </div>
    </div>
  </div>
</nav>

Пункт с выпадающим списком кладут в navbar-start вместо обычной ссылки. Класс is-active у navbar-menu здесь только для превью: меню выглядит так, будто бургер уже нажат, и вложенные ссылки показаны сразу под «Меню». На широком экране под пунктом «Меню» со стрелкой список появляется при наведении.

Закреплённая панель

Модификатор is-fixed-top прибивает панель к верху окна при прокрутке. Чтобы она не закрыла начало страницы, добавьте тегу <body> класс has-navbar-fixed-top — он даёт отступ сверху на высоту панели.

Частая ошибка

Забыть, что data-target должен совпадать с id меню. Если написать data-target="menu", а у блока id="mainMenu", скрипт найдёт null и упадёт с ошибкой в консоли, а меню не откроется. Проверьте пару data-target и id первой, когда бургер «не работает».

Спасибо, что читаете!