О фирме
Продукты
Наука

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

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

Основу примера составляют 3 ZeroBlocka ( 1 основное меню и 2 вкладки)
Как выполнили данный пример:

1. Создали первый ZeroBlock и добавили в него 3 кнопки для вкладок
Задали позиционирование для кнопок Window Container, по Х - Right, по Y - Top
Высоту блока задали в 90px
Поставили ограничение видимости меню от 980рх

2. Добавили ещё 2 ZeroBlocka для меню и наполнили их контентом
Задали позиционирование для элементов Window Container, по Х - Right, по Y - Top

3. Добавили код на страницу в блок ДРУГОЕ►Т123
СПИСОК ВСЕХ ВИДЕО
Видеоинструкция данного примера
Видеоинструкция данного примера доступна в архиве
mo-tilda Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём основное меню в ZeroBlock
2. Выставляем привязки элементов в ZeroBlock
3. Создаём выпадающие меню из ZeroBlock
4. Прописываем нужные ID в коде данного примера

Создаём основное и выпадающее меню из ZeroBlock.
Длительность видео: 25 мин
Подписка к видеоинструкции на платной основе
Фрагмент видео
<style>
/*Стили для основного меню*/
#rec62834941{
    position: fixed;
    top: 0px;
    left: 0;
    width:100%;
    z-index:9999;
    box-shadow: 0px -5px 20px 0px #000000;
}
/*Стили для выпадающего меню */
.drmenu{
    position: fixed;
    text-align: left;
    width: 0%;
    top: 90px;
    left: 0;
   -webkit-transition: all 0.55s;
    transition: all 0.55s;
}
/*Убираем цвет фона выпадающих меню*/
.drmenu .t396__artboard {
    background:none !important;   
}

/*Появление меню при наведении на вкладку */
.vklmenu:hover .drmenu{
    width: 100% !important;
}
/*Задаём цвет вкладки в цвет ZeroMenu при наведении*/
.vklmenu:hover {
  background: #f3f4f6  !important;
  cursor: default;
}
</style>

<script>
	$(document).ready(function(){
	//Добавляем классы к блокам выпадающих меню    
        $('#rec62897160').addClass('dropmenu1 drmenu');
        $('#rec62935200').addClass('dropmenu2 drmenu');
	//Добавляем классы к вкладкам меню 
        $('div.tn-elem__628349411533820477935').addClass('vkladkamenu1 vklmenu');
        $('div.tn-elem__628349411533877958649').addClass('vkladkamenu2 vklmenu');
	//Добавляем выпадающие меню к соответствующим вкладкам в меню с указанием цифровых классов этих вкладок
        $('.dropmenu1').appendTo('.vkladkamenu1');
        $('.dropmenu2').appendTo('.vkladkamenu2');
});
</script>
Made on
Tilda