Фиксированное боковое меню

Название модификации

Модификации

Главная

Вы сможете добавить кнопку для копирования текста из блока TX19 — код

Копирование текста и кода по кнопки в Tilda

Поблагодарить

Нужна помощь

Инструкция

Создайте блоки (разделы), на которые будут ссылаться пункты бокового меню
Перед каждым блоком добавьте блок с якорной ссылкой «Т173»
Для каждой якорной ссылки, в параметре «Контент» введите её имя. Например, если это блок с контактной информацией, то имя якорной ссылки будет выглядеть так: «contacts»
После всех блоков на странице создайте блок «Т178» для плавного скрола к якорным ссылкам
Создайте zero block в любом месте на странице. Если у вас многостраничный сайт, то выполняйте все шаги, начиная с пятого в header или в footer вашего сайта. Чтобы меню работало на всех страницах.
Зайдите в настройки zero block.
Нажмите на ссылку «Добавить CSS Class Name»
В появившемся поле пропишите «uc-menu»
Зайдите в редактор блока и удалите из него все элементы
Найдите пункт «POSITION AND OVERFLOW»
Измените параметр «OVERFLOW» на «Visible»
Удалите цвет фона
Установите для блока высоту в 1px
Нажмите на кнопку «+» и выберите «Add HTML»
В настройках html элемента нажмите на «+CONTAINER»
Для параметра контейнер выберите «Window Container»
Для параметров «AXIS X» и «AXIS Y» выберите «left» и «top» соответственно
В поле ширины элемента пропишите 320px
Откройте этот html элемент
Присвойте блоку внутри него класс «burger-menu» и удалите текст «Hello world!»

Демо

<style>
        .uc-menu {
            position: fixed;
            top: 0;
            left: -320px;
            transition: left 0.3s;
            z-index: 500;
        }
        .burger-menu {
            width: 320px;
            height: 100vh;
            background-color: blue; /* Цвет фона меню */
        }
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 499;
        }
        .menu-show, .menu-hide {
            cursor: pointer;
            z-index: 501;
        }
        .menu-li {
            color: black; /* Цвет ссылок */
        }
        .menu-li:hover {
            color: yellow; /* Цвет ссылок при наведении */
        }
    </style>
    <div class='overlay'></div>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const showButton = document.querySelector('.menu-show');
        const hideButton = document.querySelector('.menu-hide');
        const burgerMenu = document.querySelector('.uc-menu');
        const overlay = document.querySelector('.overlay');
        const menuLiItems = document.querySelectorAll('.menu-li');

        showButton.addEventListener('click', function () {
            burgerMenu.style.left = '0';
            overlay.style.display = 'block';
            showButton.style.opacity= '0'; 
        });

        hideButton.addEventListener('click', function () {
            burgerMenu.style.left = '-320px';
            overlay.style.display = 'none';
            showButton.style.opacity= '1';
        });

        overlay.addEventListener('click', function () {
            burgerMenu.style.left = '-320px';
            overlay.style.display = 'none';
            showButton.style.opacity= '1';
        });

        menuLiItems.forEach(menuLi => {
            menuLi.addEventListener('click', function () {
            burgerMenu.style.left = '-320px';
            overlay.style.display = 'none';
            showButton.style.opacity= '1';
        });
        }); 
        });
    </script>

Скопировать код

Код скопирован

<style>
.uc-menu {
    position: fixed;
    top: 0;
    right: -320px; /* Изменение свойства right */
    transition: right 0.3s; /* Изменение свойства transition */
    z-index: 500;
}
.burger-menu {
    width: 320px;
    height: 100vh;
    background-color: blue; /* Цвет фона меню */
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const showButton = document.querySelector('.menu-show');
    const hideButton = document.querySelector('.menu-hide');
    const burgerMenu = document.querySelector('.uc-menu');
    const overlay = document.querySelector('.overlay');
    const menuLiItems = document.querySelectorAll('.menu-li');

    showButton.addEventListener('click', function () {
        burgerMenu.style.right = '0'; 
        overlay.style.display = 'block';
        showButton.style.opacity= '0'; 
    });

    hideButton.addEventListener('click', function () {
        burgerMenu.style.right = '-320px';
        overlay.style.display = 'none';
        showButton.style.opacity= '1';
    });

    overlay.addEventListener('click', function () {
        burgerMenu.style.right = '-320px'; 
        overlay.style.display = 'none';
        showButton.style.opacity= '1';
    });

    menuLiItems.forEach(menuLi => {
        menuLi.addEventListener('click', function () {
            burgerMenu.style.right = '-320px'; 
            overlay.style.display = 'none';
            showButton.style.opacity= '1';
        });
    }); 
});
</script>

Скопировать код

Код скопирован