Опишите вашу задачу
Ваши контакты нужны только для ответа. Правила обработки данных
Оставьте отзыв
Ваш e-mail необходим только для обратной связи. Соглашение
1. Какой сайт вам нужен?
2. У вас есть прототип сайта?
Прототип — это будущий план сайта, где весь контент разбит на смысловые блоки.
3. Сколько страниц будет у сайта?
4. Какой дизайн вы хотите?
5. Какой функционал?
Ваш сайт будет стоить примерно:
(+ - 3000 руб.)
0 руб.
Укажите контакты
Опишите вашу задачу
Write Close
Close
Напишите мне
Ваши контакты нужны только для ответа. Правила обработки данных
 

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

У Тильды есть десятки блоков меню, однако у них стандартный функционал: логотип, пункты меню, соцсети, кнопку, описание. Но часто перед дизайнерами встают нестандартные задачи, например вставить иконки, написать 2 номера телефона и т.д.
Раньше делались меню в Zeroblok в виде статичного блока, расположенного над другими. С ростом популярности платформы стало появляться много дополнительных возможностей, которые реализуются с помощью 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>
Если вы 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>
Эти коды писала не я. Я собрала их с 3 разных сайтов для своего удобства и для удобства дизайнеров, которые будут пользоваться ими.
Поделитесь в соц. сетях: