Главное правило: ссылки — только из HTML
Телефон и компьютер получают один и тот же HTML. Мобильное меню строится из ссылок блока nav.menu, который шаблон уже отдаёт в коде каждой страницы, и своих адресов не добавляет. Поэтому всё, что видит посетитель в меню, видит и робот Яндекса и Google — без JavaScript. Новый пункт меню появляется так: сначала ссылка в шаблоне, потом она сама попадает в мобильное меню.
Что в архиве
mm.css | стили, все классы с префиксом mm- — со стилями шаблона не пересекаются |
mm.js | скрипт без библиотек, 46 КБ |
nav-target.html | образец разметки nav.menu: 147 марок с товаром, «Мужские и женские», коллекции |
mm-extra.json | оформление и поиск: логотипы, русские написания, порядок популярных марок, что скрыть |
logos/ | 68 логотипов марок, поля обрезаны |
menu.html | страница демо, на сайт не нужна |
Иконки разделов встроены в скрипт: 11 иконок одного набора — сетка 32×32, одна толщина линии на любом размере. Иконки шаблона нарисованы в разном масштабе, и на телефоне линии выглядели разной толщины.
Шаг 1. Разметка меню в шаблоне
- Марки — все, у которых есть активный товар. Лишние пункты убрать, марки с товаром добавить. Скрывать пункты через
style="display: none"не нужно: сворачивать список на компьютере — классом и CSS. - Новый блок
data-mm="watch": ссылки «Мужские часы» и «Женские часы». - Новый блок
data-mm="collections": коллекции. Анкор — как заголовок страницы, марка — в атрибутеdata-brand.
Вместе с меню, иначе ссылки сработают слабее: canonical на себя у страниц коллекций и свои title и description у страниц «Мужские» и «Женские».
Шаг 2. Подключить модуль
Скопировать папку в шаблон сайта и подключить перед </body>:
<link rel="stylesheet" href="/local/templates/<шаблон>/mobile-menu/mm.css"> <script src="/local/templates/<шаблон>/mobile-menu/mm.js" defer></script> <script> document.addEventListener('DOMContentLoaded', function () { var nav = document.querySelector('nav.menu'); fetch('/local/templates/<шаблон>/mobile-menu/mm-extra.json') .then(function (r) { return r.json(); }) .then(function (extra) { MobileMenu.init({ data: MobileMenu.fromSiteNav(nav, extra), media: '(max-width: 767px)', trigger: '.burger-btn', tabbar: true }); }); }); </script>
- Меню собирается при первом нажатии. При загрузке страницы модуль не добавляет разметку и не грузит картинки.
- На телефоне скрипт перехватывает нажатие на бургер раньше шаблона. На компьютере всё работает как раньше.
tabbar: true— нижняя панель «Меню», «Бренды», «Поиск», «Избранное». Если внизу уже есть плашка cookie или кнопка чата — поднять их на 58 px.
Как ведёт себя
- Экраны сдвигаются, как в приложении. Свайп от левого края — назад.
- Кнопка «Назад» на Android и жест «назад» в iPhone возвращают на шаг меню, а из первого экрана закрывают его. Страница при этом остаётся открытой.
- Пока меню открыто, страница под ним не прокручивается.
- «Вы смотрели» — последние 6 открытых марок. Личных данных там нет, только адреса страниц.
- Esc закрывает меню, у кнопок есть подписи для экранного диктора, учитывается системная настройка «Уменьшить движение».
Проверка после выкладки
В коде страницы (не в инспекторе, а в «Просмотре кода») — все ссылки марок, коллекции с data-brand, «Мужские» и «Женские»; ни одного пункта меню со style="display: none". На живом iPhone: открыть, пролистать, поиск, шкала A–Z, «Назад».