Мегаменю

Обычное выпадающее меню — столбик ссылок. Он работает, пока пунктов пять-семь; дальше столбик вытягивается ниже экрана. Мегаменю раскладывает те же пункты в колонки с заголовками разделов, и структура сайта видна за один взгляд.

Когда оно нужно, а когда мешает

Мегаменю решает одну задачу: показать много пунктов сразу, не заставляя человека листать. Если пунктов мало, оно только добавляет лишний щелчок между человеком и страницей.

Разметка: кнопка и панель

Пункт, который открывает панель, — это <button>, а не ссылка. Ссылка обещает переход на другую страницу, а здесь щелчок ничего не открывает, кроме панели. Кнопка заодно бесплатно получает от браузера обработку Enter и Пробела.

Два атрибута обязательны. aria-expanded сообщает, открыта панель или закрыта, — без него программа чтения экрана назовёт кнопку просто «Мануалы, кнопка» и умолчит о том, что она что-то разворачивает. aria-controls указывает на то, чем кнопка управляет.

<li class="megamenu__item">
  <button class="megamenu__button" type="button"
          aria-expanded="false" aria-controls="panel-manualy">
    Мануалы
  </button>

  <div class="megamenu__panel" id="panel-manualy" hidden>
    <div class="container megamenu__grid">
      <div class="megamenu__col">
        <p class="megamenu__title">Блоки страницы</p>
        <ul class="megamenu__list">
          <li>
            <a href="/manualy/megamenyu/">
              Мегаменю
              <span class="megamenu__note">Меню колонками во всю ширину</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</li>

Внутри панели — обычный список ссылок. Не <div> с обработчиком щелчка: то, что ведёт на страницу, обязано быть <a href>, иначе ссылка не откроется в новой вкладке средним щелчком и её не увидит поисковик.

Мышь и клавиатура — это два разных жеста

Мышью панель открывается наведением: привычно и быстро. Клавиатура наведения не знает, поэтому там работает Enter или Пробел на кнопке, а Esc закрывает.

Здесь меня ждали грабли. Если повесить на кнопку обычное переключение «открыть — закрыть», мышь начинает работать наоборот: к моменту щелчка панель уже раскрыта наведением, и щелчок её захлопывает. Человек навёл, увидел список, нажал — и всё пропало.

Различить жесты помогает свойство detail у события. У щелчка мышью в нём число нажатий, а у щелчка, который браузер сам сделал из Enter или Пробела, — ноль.

button.addEventListener('click', (event) => {
  // detail === 0 — щелчок пришёл с клавиатуры: Enter или Пробел
  if (event.detail === 0) toggle(button);
  else open(button);
});

На телефоне мегаменю не бывает

Три колонки на экране в 360 пикселей не помещаются никаким способом. На узком экране показывается другое — список в столбик, который выезжает по кнопке-бургеру. Это не «то же меню поменьше», а отдельный кусок разметки со своим классом, и переключаются они медиавыражением.

Что попросить у нейросети

Разметку и стили мегаменю можно списать отсюда, а вот поведение проще заказать целиком: там много мелочей, и все они про доступность.

В Evolution CMS пункты берутся из дерева

Писать пункты руками в шаблоне — значит лезть в шаблон при каждой новой странице. За списки ссылок в Evolution отвечает сниппет DocLister: он обходит дерево ресурсов и отдаёт готовый список. Колонок в меню три, значит и вызова три — по одному на раздел.

[[DocLister?
  &parents=`3`
  &sortBy=`menuindex`
  &sortDir=`ASC`
  &tvList=`menu_desc`
  &tpl=`megamenuRow`
]]

&parents — номер раздела, чьи страницы идут в колонку, &tpl — имя чанка, которым рисуется один пункт. Вёрстка остаётся вашей: сниппет решает, какие страницы вывести, а как они выглядят — ваш чанк. Строка пояснения под названием берётся из TV-поля страницы и запрашивается поимённо в &tvList; в чанке она доступна как [+tv.menu_desc+]. Порядок задан явно не для красоты: без &sortBy DocLister сортирует список по дате публикации, а не по порядку в дереве.

Частые ошибки