Как сделать сквозное прилипающее меню на ReadyMag (план Creator)

Внимание, данный способ по прежнему работает, но ReadyMag тестирует возможность делать плавающие блоки в бета, подробнее (https://www.facebook.com/groups/readymag/permalink/410835412614352/)

Многие дизайнеры пользуются ReadyMag это очень удобный сервис для создания лонгридов, презентаций и микросайтов. Штука сделана дизайнерами для дизайнеров. В отличие от Тильды, где блоки заранее заданы, здесь совсем другая идеалогия по сути это платформа для визуальной версткой: с сеткой, вертикальным ритмом, кастомными шрифтами и что не мало важно анимацией.

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

Очень удобно сделать небольшой сайт используя слайды высотой в экран. Проблема в том что невозможно сделать сквозное меню, которое бы было на уровне выше слайдов. Многие просто дублируют меню на всех слайдах, но это выглядит не аккуратно. Недавно сервис выпустил обновление в котором появилась фича code injection однако тарифная политика ориентирована больше на студии и цена довольно кусачая.

Я расскажу о том как сделать сквозное меню для лейаута с несколькими слайдами не прибегая к code injection оставаясь на тарифе Creator.

Идея в том что бы добавить меню на первый слайд и с помощью кода подключаемого через Google Tag Manager перетащить меню на уровень выше. Для работы потребуется подключение домена. Существенный плюс этого способа то что не придется заверстывать само меню, отдельно хостить картинки. Оно просто будет браться с первого слайда.

1. Добавьте 4 слайда и на первом сделайте верхнее меню с лого и 3 пунктами не забудьте поставьте прилипание для всех элементов. Не забудьте проставить внутренние ссылки, они понадобятся для обратной совместимости. (инструкция)
2. Подключите доступ по домену (инструкция)
3. Зарегистрируйтесь в Google Tag Manager (инструкция)
4. Добавьте и опубликуйте произвольный тег со следующим кодом:

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

Теперь о минусах. В случае если разработчики прикроют GTM, или изменят разметку меню перестанет работать, однако оно останется на первом слайде и ссылки будут работать.

Ну а если вы богатый буратина то можете использовать этот сниппет подключив через родной редактор кода ReadyMag.

Помогло? Можете зарегистрироваться в ReadyMag по моей реф ссылке https://my.readymag.com/inv/u16155061