URL скопирован в буфер обмена!
Как сделать активный пункт меню в Zero Block на Tilda
Данная модификация поможет выделить активный пункт меню при помощи подчеркивания или смены цвета текста и фона. Работает с текстом и кнопкой в зеро блоке.
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
ID блока
Класс элемента
Тип меню
Настройки меню (текст)
Цвет текста
Насыщенность текста
Подчеркивание
Цвет подчеркивания
Цвет текста при наведении
Цвет линии при наведении
Настройки меню (кнопки)
Цвет текста
Насыщенность текста
Цвет фона
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD068--><style>
.ti-menu .tn-atom.active {
font-weight: 100 !important;
color: !important;
text-decoration: underline solid;
text-decoration-thickness: 0px;
}
.ti-menu .tn-atom:hover {
color: !important;
text-decoration: underline solid;
text-decoration-thickness: 0px;
transition: all 0.2s ease;
}
</style> <style>
.ti-menu .tn-atom.active {
font-weight: 100 !important;
color: !important;
background: !important;
}
.ti-menu .tn-atom:hover {
transition: all 0.2s ease;
}
</style>
<script>
$(document).ready(function() {
var TiCodemenuItems = $('#rec720195837 .ti-menu a');
var TiCodeanchorBlocks = $('a[name]');
function setActiveSection() {
var TCcurrentSection = '';
var scrollTop = $(window).scrollTop();
TiCodeanchorBlocks.each(function() {
var TisectionId = $(this).attr('name');
var offsetTop = $(this).offset().top;
if (scrollTop >= offsetTop - 100) {
TCcurrentSection = TisectionId;
}
});
TiCodemenuItems.each(function() {
var TisectionId = $(this).attr('href').split('#')[1];
if (TisectionId === TCcurrentSection) {
$(this).closest('.tn-atom').addClass('active');
} else {
$(this).closest('.tn-atom').removeClass('active');
}
});
}
setActiveSection();
$(window).scroll(setActiveSection);
});
</script>
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем в Zero Block текст или кнопки и указываем для них класс ti-menu
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. Указываем id зеро блока в генератор кода и выбираем "тип меню". Если в зеро блоке создавали текст, то выбираем "текст", если кнопки, то указываем "кнопка";
2. Указываем дополнительные настройки в генераторе кода:
Цвет текста - указываем цвет текста активного пункта меню;
Насыщенность - указываем жирность текста для активного пункта. Вариант 400 = равен стандартному тексту;
Подчеркивание - при необходимости включаем линию подчеркивания для активного пункта;
Цвет линии - указываем цвет подчеркивания;
Цвет текста при наведении - при необходимости указываем цвет текста при наведении. Если у вас в качестве пунктов меню выступает кнопка, то цвет текста при наведении настраиваем в самой кнопке в зеро блок;
Цвет линии при наведении - указываем цвет подчеркивания при наведении;
Цвет фона - указываем цвет фона активного пункта (доступно только для кнопок);
3. Копируем готовый код и вставляем в HTML блок Т123;
4. Расставляем на странице якоря (блок Т173) и прописываем их в меню. Важно! Модификация работает с ссылками формата #anchor и /#anchor. Например если у вас на сайте меню в хедере и при клике нужно сделать переход на другую страницу, то в саму кнопку прописываем ссылку формата /страница#up и в самом верху страницы создаем якорь #up Тогда при переходе между страницами пункты также будут подсвечиваться.
Примечание! Для плавного скрола к якорям добавляем в самый низ страницы блок Т178. Если вам нужно поставить якорь внутри длинного зеро блока, то можно воспользоваться модификацией <TCD006> Якорная ссылка внутри Zero Block
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. Указываем id зеро блока в генератор кода и выбираем "тип меню". Если в зеро блоке создавали текст, то выбираем "текст", если кнопки, то указываем "кнопка";
2. Указываем дополнительные настройки в генераторе кода:
Цвет текста - указываем цвет текста активного пункта меню;
Насыщенность - указываем жирность текста для активного пункта. Вариант 400 = равен стандартному тексту;
Подчеркивание - при необходимости включаем линию подчеркивания для активного пункта;
Цвет линии - указываем цвет подчеркивания;
Цвет текста при наведении - при необходимости указываем цвет текста при наведении. Если у вас в качестве пунктов меню выступает кнопка, то цвет текста при наведении настраиваем в самой кнопке в зеро блок;
Цвет линии при наведении - указываем цвет подчеркивания при наведении;
Цвет фона - указываем цвет фона активного пункта (доступно только для кнопок);
3. Копируем готовый код и вставляем в HTML блок Т123;
4. Расставляем на странице якоря (блок Т173) и прописываем их в меню. Важно! Модификация работает с ссылками формата #anchor и /#anchor. Например если у вас на сайте меню в хедере и при клике нужно сделать переход на другую страницу, то в саму кнопку прописываем ссылку формата /страница#up и в самом верху страницы создаем якорь #up Тогда при переходе между страницами пункты также будут подсвечиваться.
Примечание! Для плавного скрола к якорям добавляем в самый низ страницы блок Т178. Если вам нужно поставить якорь внутри длинного зеро блока, то можно воспользоваться модификацией <TCD006> Якорная ссылка внутри Zero Block
О НАС
КОМАНДА
КОНТАКТЫ
