Делаем выпадающее меню из ZeroBlock для экранов от 980px в Tilda
О фирме
Продукты
Наука

L&R разрабатывает, производит и распространяет свою продукцию во всем мире

Делаем выпадающее меню из ZeroBlock для экранов от 980px в Tilda

1
Создали первый ZeroBlock и добавили в него 3 кнопки для вкладок
Задали позиционирование для кнопок Window Container, по Х - Right,
по Y - Top
Высоту блока задали в 90px
Поставили ограничение видимости меню от 980рх
2
Добавили ещё 2 ZeroBlocka для меню и наполнили их контентом
Задали позиционирование для элементов Window Container, по Х - Right, по Y - Top
3
Сделали высоту для этого Zero 0px и включили настройку
Overflow - Visible
4
Добавили код на страницу в блок ДРУГОЕ►Т123
В коде заменили:
ID основного меню - #rec62834941
ID выпадающих меню
$('#rec62897160')
$('#rec62935200')
Класс элементов вкладок основного меню
$('div.tn-elem__628349411533820477935')
$('div.tn-elem__628349411533877958649')
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём основное и выпадающее меню из ZeroBlock.
Длительность видео: 19 мин
Фрагмент видео
Библиотека для примера
<style>
/*Стили для основного меню*/
#rec166095362{
    position: static;
    top: 0px;
    left: 0;
    width:100%;
    z-index:9999;
    box-shadow: 0px -5px 20px 0px #000000;
}
/*Стили для выпадающего меню */
.drmenu{
    position: fixed;
    text-align: left;
    width: 100%;
    top: 90px;
    left: 0;
    display:none;
}
/*Убираем цвет фона выпадающих меню*/
.drmenu .t396__artboard {
    background:none !important;   
}
/*Появление меню при наведении на вкладку */
.vklmenu:hover .drmenu{
    display:block;
}
/*Задаём цвет вкладки в цвет ZeroMenu при наведении*/
.vklmenu:hover {
  background: #f3f4f6  !important;
  cursor: default;
}
</style>

<script>
	$(document).ready(function(){
	//Добавляем классы к блокам выпадающих меню    
        $('#rec166095366').addClass('dropmenu1 drmenu');
        $('#rec166095367').addClass('dropmenu2 drmenu');
	//Добавляем классы к вкладкам меню 
        $('div.tn-elem__1660953621533820477935').addClass('vkladkamenu1 vklmenu');
        $('div.tn-elem__1660953621533877958649').addClass('vkladkamenu2 vklmenu');
	//Добавляем выпадающие меню к соответствующим вкладкам в меню с указанием цифровых классов этих вкладок
        $('.dropmenu1').appendTo('.vkladkamenu1');
        $('.dropmenu2').appendTo('.vkladkamenu2');
        function setMenuPosition(){
        if( !($('.vklmenu').closest('.t-rec').css('position').toLowerCase() == 'fixed')) {
         $('.drmenu').css('top' , $('.vklmenu').parent().offset().top + $('.vklmenu').parent().height() -  $(window).scrollTop());
        };    
        };
        setMenuPosition();
        $(window).scroll(function(e) {setMenuPosition()});
});
</script>
Made on
Tilda