Как сделать «липкое» меню на Tilda для мобильного вида?

2023-09-03 12:58 tilda

Делал сайт-меню для предприятия общественного питания. У них много категорий и для удобной навигации на странице нужно держать 2 меню: сквозное по сайту (Основная кухня, Барная карта, Кальяны) и локальное на странице с разделами. На десктопе меню можно сделать с удобной фиксацией после скролла, а вот для мобильной версии такой функции нет. Давайте сделаем такое меню для мобильной версии сайта.

Основное меню сквозное, должно быть на всех страницах. Поэтому выносим его в Шапку и там настраиваем, как нам удобно. В моем случае оно фиксируется при скролле и имеет высоту в 60px (запоминаем, это важно).

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

Для фиксирования меню нужно провести подготовку. Делать это будем через код CSS, поэтому блоку зададим уникальное имя (BLOCK CSS CLASS NAME). Поставим uc-fixed-mobile, чтобы из контекста понимать, что это за блок.

Поскольку меню для мобильных, то не забудьте поставить настройки видимости только для экранов меньше 960px.

Сохраняем, закрываем. Здесь работа пока что закончена.

У меня несколько страниц, где есть связка глобальное меню+локальное. Поэтому я добавляю код CSS через Настройки сайта - Еще - ПОЛЬЗОВАТЕЛЬСКИЕ CSS-СТИЛИ. Если у вас только одна такая страница, можно добавить код через блок T123

Сам код сделан в Тильдошной (https://tildoshnaya.com/modification/sticky), я его модифицировал. Добавляем код:

/* прилипающее меню в мобильной версии */ 
.uc-fixed-mobile {
    position: sticky;
    position: -webkit-sticky;
    z-index: 999;
    top: 60px;
}

.uc-fixed-mobile .t-records {
    overflow: unset !important;
}

position — свойство, дающее блоку возможность «прилипать» к границе. Т. е. блок стоит на своем месте, но по скроллу он фиксируется. По обратном скроллу — возвращается на место.

z-index - свойство, определяющее «высоту» блока над другими. Чтобы наш блок был всегда виден и не перекрывался другими картинками или текстом.

top - свойство, определяющее где начинается граница для фиксирования. Т.к. сквозное меню высотой 60px, то мне надо что его тоже было видно. Вот я и «опустил» границу экрана.

overflow - свойство для показа меню за границами экрана.

Сохраняем, публикуем страницы и проверяем в мобильном виде. Меню фиксируется при прокрутке и ваш сайт стал удобнее для использования!

Обратите внимание, я не консультирую по использованию кода бесплатно.

Игорь Айдегин