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

О фирме

Продукты

Наука

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

Узнать больше

FAQs

Do you have some questions? Find answers below!

Page Actions

Duplicate, transfer page to another user, change site structure, delete

How to add a menu

For multi-page projects or to navigate within one page

Anchors and internal links

How to add a link to a certain spot in theproject

Делаем выпадающее меню из 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>