Айдегин - блог Tilda-вебмастера

Как сделать «липкое» меню на 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#nbsp;— свойство, дающее блоку возможность «прилипать» к#nbsp;границе. Т.#nbsp;е. блок стоит на#nbsp;своем месте, но#nbsp;по#nbsp;скроллу он#nbsp;фиксируется. По#nbsp;обратном скроллу#nbsp;— возвращается на#nbsp;место.
z-index - свойство, определяющее «высоту» блока над другими. Чтобы наш блок был всегда виден и не перекрывался другими картинками или текстом.
top - свойство, определяющее где начинается граница для фиксирования. Т.к. сквозное меню высотой 60px, то мне надо что его тоже было видно. Вот я и «опустил» границу экрана.
overflow - свойство для показа меню за границами экрана.
Сохраняем, публикуем страницы и проверяем в мобильном виде. Меню фиксируется при прокрутке и ваш сайт стал удобнее для использования!
Обратите внимание, я не консультирую по использованию кода бесплатно.