Меню на Тильде в Zeroblock

HTML-коды для верстки меню на Тильде

Буянова Екатерина
UX / UI / Tilda эксперт

У Тильды есть десятки блоков меню, однако у них стандартный функционал: логотип, пункты меню, соцсети, кнопку, описание. Но часто перед дизайнерами встают нестандартные задачи, например вставить иконки, написать 2 номера телефона и т.д. С ростом популярности платформы стало появляться много дополнительных возможностей, которые реализуются с помощью html кода, вставленного в контент сайта.

HTML-код фиксированного меню


<style>
/*Задаем фиксацию для меню при скролле и номер слоя, чтобы меню было выше остальных блоков*/
.fixed {
 width: 100%;
 position: fixed;
 top: 0px;
 z-index: 9999;
 /*Задаём время и характер анимации для фона меню */
 transition:all 0.6s cubic-bezier(0, 0, 0.8, 1.0);
}

.fonmenu{
 /*Задаём цвет фона для меню (в самом Zeroblok следует не задавать цвет фона)*/  
 background:#ffffff;
    
}

</style>

<script>
$(document).ready(function(){
    /* Пишем код Zero-блока, в котором находится меню */
    var blockMenuID = '#rec12345678';
    //Добавляем фиксацию при скролле
    $(blockMenuID).addClass('fixed');
   //Прописываем характеристики для скролла
    $(window).scroll(function() { 
        var top = $(document).scrollTop();
        //Если скролл более 5 px
        if (top >= 5) { 
        //То добавляем к меню наш фон, цвет которого прописали выше
          $(blockMenuID).addClass('fonmenu');
        } else {
        //В самом верхнем положении меню удаляем фон (делаем его прозрачным)    
          $(blockMenuID).removeClass('fonmenu'); 
            
        }
    });
});
</script>

HTML-код фиксированного меню, которое появляется при скролле


<script>
$(document).ready(function() {
    /* Нужно заменить на ID блока выполняющего роль меню */
    var id = "#rec346943007";
    if ($(id).length > 0) {
        var newMenu = $(id).clone().addClass("fixed unpinned").appendTo("#allrecords");

        /* Если нужно скрыть меню со страницы (только появляться при скролле) укажите true */
        var hideMenu = true; /* Если нужно оставить меню на своём месте — false */
        if (hideMenu) {
            $(id)[0].remove();
        }

        /* Если нужно, чтобы меню прикреплялось и в мобильной версии, то укажите true */
        var needMobile = false;

        if (!isMobile || (isMobile && needMobile)) {
            $(window).scroll(function() {
                var top = $(document).scrollTop();
                /* появление меню при прокрутке через 250 пикселей */
                if (top >= 600) {
                    newMenu.removeClass("unpinned");
                    newMenu.addClass("pinned");
                } else {
                    newMenu.removeClass("pinned");
                    newMenu.addClass("unpinned");
                }
            });
        } else {
            newMenu.hide();
        }
    }
});

</script>

<style>
.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    transition: transform 250ms linear;
    /* время появления/исчезновения меню — 250 мс */
    z-index: 99999;
}

.pinned {
    transform: translateY(0%)
}

.unpinned {
    transform: translateY(-100%)
}

</style>

HTML-код меню-гамбургера на zero-блоке

Необхоимо создать блок меню ME403 с заданной шириной. Затем создать Zero-блок с выравниванием всех элементов в контейнере относительно "window". В поле с кодом вставить номер Zero-блока и ширину, которую мы задали в меню-гамбургере. Следите, что все элементы в Zero-блоке правее границы в указанные вами количество пикселей будут не видны при открытии меню.


<style>
.t451m__container{ padding: 0px !important;}
.t451m {max-width: 930px !important;}
.t451m__close { background-color: transparent;}
.t451m__close_icon span { background-color: #FFFFFF !important;}
</style>
<script>
$(document).ready(function(){
$(".t450__container").empty();
$("#rec344175636").appendTo(".t450__container");
});
</script>

Если вы front-end или back-end разработчик, то с легкостью добавите необходимые функции к этому коду. В выпадающем меню на Tilda нельзя выделить пункты при наведении. Это тоже решается с помощью html-кода.


<style type="text/css">
.t794__typo:hover{
   /*Цвет текста*/
   color:#000000 !important; 
   /*Цвет фона*/
    background-color:#ffffff;
}  
</style>

Иногда стандартного выпадающего меню недостаточно. Хочется сделать выпадающие блоки на всю ширину экрана с произвольным расположением пунктов меню.


<style>
/*Настройка высоты вкладок */
.t228__list_item {
    height: 80px;
    display: inline-block  !important;
    padding: 0 15px !important;
   
}
/*Настройка вкладок */
.t228 .t-menu__link-item {
    height: inherit;
    display: table-cell !important;
    vertical-align: middle;
}
/*Цвет  вкладок при наведении */
.t228__list_item:hover {
    background:#171717;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
}
/*Настройка для блока FT302 */
[data-record-type="420"] {
    position: fixed;
    width: 100%;
    top: 80px;
    z-index: 990;
    left: 0;
    opacity: 0;
   -webkit-transition: all 0.35s;
   transition: all 0.35s;
   visibility: hidden;
   background: linear-gradient(to bottom, #171717 45%, #484848);
}
/*Появление меню при наведении на вкладку */
.t228__list_item:hover .mainmenu {
    display:block !important;
    opacity: 1;
    visibility: visible;
}
</style>

<script>
	$(document).ready(function(){
	//Добавляем классы к блокам FT302    
	$('[data-record-type="420"]').addClass('mainmenu');
	//Добавляем блоки FT302 к соответствующим вкладкам в меню с указанием ID этого меню
       for(let i = 0; i < $(".mainmenu").length; i++){
       $('.mainmenu:eq('+i+')').appendTo('#rec82569956 .t228__list_item:eq('+i+')');
   };
});
</script>

Материал я собрала с 4 разных сайтов для своего удобства и для удобства дизайнеров, которые будут пользоваться ими.

Информация для клиентов

Как написать продающий текст

Стили в веб-дизайне

10 способов повысить конверсию сайта на Тильде

Мобильная версия на Тильде

Анимация на Тильде

Смешные фразы клиентов