Версия для слабовидящих на Tilda с кнопкой в меню и Zero‑блоке

Инструкция

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

Скопируйте код ниже и вставьте его внутрь раздела Head. Для этого перейдите в «Настройки сайта», в открывшемся меню выберите раздел «Ещё», затем найдите пункт «HTML‑код для вставки внутрь HEAD» и нажмите кнопку «Редактировать код».

<!-- Скрипт для создания версии для слабовидящих в Tilda с сайта bulgkate.ru -->

<!-- Нормальная jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  var $jq = jQuery.noConflict(); // сохранили jQuery до перезаписи
</script>

<!-- Slick (работает с нормальной jQuery) -->
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<!-- Потом подключаете старую jQuery и uhpv -->
<script src="https://lidrekon.ru/slep/js/jquery.js"></script>
<script src="https://lidrekon.ru/slep/js/uhpv-full.min.js"></script>

Теперь вы можете разместить кнопку двумя способами: внутри Zero‑блока или в меню.

На странице

1. Добавьте код на страницу через блок T123.
2. Нажмите «Edit code» и вставьте код ниже.

<!-- Скрипт для создания версии для слабовидящих в Tilda с сайта bulgkate.ru -->

<img id="specialButton" style="cursor:pointer; width: 10px; height: 10px;" src="https://static.tildacdn.info/tild3830-3461-4263-a130-663261663264/___1.svg" alt="ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ" title="ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ" />

Чтобы изменить размер кнопки, измените параметры width: 10px; height: 10px внутри кода, заменив 10px на нужные вам значения.

Внутри меню

1. Для этого способа вам в любом случае потребуется добавить кнопку на страницу способом, описанным выше. Но, вы можете спрятать ее внутри какого‑либо Zero‑блока, вынеся за пределы блока. Этому элементу просто необходимо быть на сайте, но не обязательно на виду.

2. Добавьте свою кнопку в меню в разделе «Ссылки на месседжеры и сервисы». Можно загрузить свою иконку, а поле «Ссылка» оставьте пустым.

3. Добавьте блок T123 и поместите в него приведённый ниже код:

<!-- Скрипт для создания версии для слабовидящих в Tilda с сайта bulgkate.ru -->

<script>
    document.querySelector(".t-sociallinks__item_website a").setAttribute("id", "specialButton");

</script>
<style>
    #specialButton {
  cursor: pointer; /* Устанавливает курсор как указатель, чтобы показать, что это кнопка */
}

#specialButton:hover {
  opacity: 0.7; /* Добавляет эффект прозрачности при наведении */
  transition: opacity 0.3s; /* Плавный переход */
}

</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var burger = document.querySelector('.t-menuburger');
    var menu = document.getElementById('nav935755391'); // Идентификатор контейнера меню
    var menuLinks = document.querySelectorAll('.t-menu__link-item, .t228__right_buttons a, .t-sociallinks a');

    if (!burger || !menu || !menuLinks.length) {
        console.log("Не найдены необходимые элементы");
        return;
    }

    // Добавляем обработчик на все ссылки
    Array.prototype.forEach.call(menuLinks, function(link) {
        link.addEventListener('click', function() {
            console.log("Клик по пункту меню: " + link.textContent);

            // Проверяем, что это мобильный экран
            if (window.innerWidth < 980) {
                // Закрываем меню
                burger.setAttribute('aria-expanded', 'false');
                burger.classList.remove('t-menuburger-opened');
                menu.style.display = 'none';
                menu.style.opacity = '0';

                // Принудительная синхронизация через задержку
                setTimeout(function() {
                    burger.setAttribute('aria-expanded', 'false');
                    burger.classList.remove('t-menuburger-opened');
                    menu.style.display = 'none';
                    menu.style.opacity = '0';
                    console.log("Меню синхронизировано после клика на пункт меню");
                }, 300);

                console.log("Меню свернуто (мобильный).");
            } else {
                console.log("Десктопный режим -- меню не сворачивается.");
            }
        });
    });

    // Обработчик клика на бургер-меню
    burger.addEventListener('click', function() {
        // Проверяем, что это мобильный экран
        if (window.innerWidth < 980) {
            var expanded = burger.getAttribute('aria-expanded') === 'true';

            console.log("Клик по бургер-меню. Текущее состояние: aria-expanded = " + expanded);

            if (!expanded) {
                burger.setAttribute('aria-expanded', 'true');
                burger.classList.add('t-menuburger-opened');
                menu.style.display = 'block';
                setTimeout(function() {
                    menu.style.opacity = '1';
                }, 0);
                console.log("Меню открыто.");
            } else {
                burger.setAttribute('aria-expanded', 'false');
                burger.classList.remove('t-menuburger-opened');
                menu.style.opacity = '0';
                setTimeout(function() {
                    menu.style.display = 'none';
                }, 300);
                console.log("Меню закрыто.");
            }
        } else {
            console.log("Клик по бургеру в десктопе -- игнорируется.");
        }
    });
});
</script>

4. В коде в строке var menu = document. getElementById ('nav935755391'); замените nav935755391 на ID вашего блока меню. Обратите внимание: в данном случае используется nav вместо #rec, вам нужно подставить только свои цифры.

Дополнительно:

Вы можете изменить размеры данной кнопки в меню с помощью дополнительного кода, который указан ниже:

<!-- Скрипт для фонового аудиоплеера с собственной кнопкой в Tilda с сайта bulgkate.ru -->

<style>
.t-sociallinks__customimg {
  width: 40px !important;
  height: 40px !important;
}
</style>

Чтобы изменить размер кнопки, измените параметры width: 40px; height: 40px внутри кода, заменив 40px на нужные вам значения.

Этот код можно разместить как в блоке T123, так и во вставке в Head сайта.

Как создать версию для слабовидящих на Tilda

Инструкция