Как сделать выпадающее меню с фото из связки блоков ME301+FT301 на экранах >980px в Tilda
 
Product1
  • Home page
  • Tour
  • Templates
  • Home page
  • Tour
  • Templates
Education1
  • Workshops
  • How to make a website
  • Design course
  • Explore
  • Workshops
  • How to make a website
  • Design course
  • Explore
  • Workshops
  • How to make a website
  • Design course
  • Explore
  • Workshops
  • How to make a website
  • Design cours
Help1
  • Knowledge base
  • Video tutorials
  • Code Export
  • Developers
  • Knowledge
  • base
  • Video tutorials
  • Code Export
  • Developers
  • Knowledge base
  • Video tutorials
  • Code Export
    Additional1
    • Blog
    • Facebook
    • Vacancies
    • Blog
    • Facebook
    • Vacancies
    • Blog
    • Facebook
    • Vacancies
    • Blog
    • Facebook
    • Vacancies
    • Blog
    • Facebook
    • Vacancies
    • Blog
    • Facebook
    Product2
    • Home page
    • Tour
    • Templates
    • Home page
    • Tour
    • Templates
    • Home page
    • Tour
    • Templates
    • Home page
    • Tour
    Education2
    • Workshops
    • How to make a website
    • Design course
    • Explore
    • Workshops
    • How to make a websit
    Help2
    • Knowledge base
    • Video tutorials
    • Video tutorials
    • Code Export
    • Developers
    • Knowledge base
    • Video tutorials
    • Code Export
    • Developers
    Additional2
    • Blog
    • Facebook
    • Vacancies
    • Blog
    • Facebook
    • Vacancies
    • Blog
    • Faceboo
    • Blog
    • Faceboo
    • Vacancies
    Product3
    • Home page
    • Tour
    • Templates
    • Home page
    • Tour
    Education3
    • Workshops
    • How to make a website
    • Design courseExplore
    • Workshops
    • How to make a website
    • Design course
    • Explore
    Help3
    • Knowledge base
    • Video tutorialsVideo tutorials
    • Code Export
    • Developers
    • Knowledge base
    • Video tutorials
    • Code Export
    • Developers
    Additional3
    • Blog
    • Facebook
    • Vacancies
    • Blog
    • Facebook
    • Vacancies
    • Blog
    • Faceboo

    Как сделать выпадающее меню с фото из связки блоков ME301+FT301 на экранах >980px в Tilda

    1
    Создали меню ME301 с 3-мя пунктами и режимом статика
    2
    Создали 3 блока FT301
    4
    Добавили код на страницу в блок Другое - Т123
    В коде изменили ID блоков
    #rec136982174 - меню ME301

    #rec136968790 - FT301
    #rec137341973 - FT301
    #rec137341976 - FT301

    Ссылки на фото
    https://static.tildacdn.com/tild6631-3535-4565-a336-613732363239/1010Men_Flyout_nocop.jpg
    https://static.tildacdn.com/tild3963-6361-4464-b733-363832313730/1010Women_Flyout_noc.jpg
    https://static.tildacdn.com/tild3534-3833-4631-a331-346535636166/20190924-flyout-home.jpg
    Mo-tilda. Level Up
    Видео инструкции по добавлению кода и работе с Zero Block.
    Создаём выпадающее меню из штатных блоков. Добавляем фото в меню, для визуального обозначения категории. Длительность видео 16 минут
    Фрагмент видео
    Библиотека для примера
    <style>
    .t228__maincontainer {
        background: #000;
    }
    .t228.t228__positionstatic {
        position: relative;
    }
    .t228 {
        position: relative;
    }
    /*Настройка высоты вкладок */
    .t228__list_item {
        height: 84px;
        display: inline-block  !important;
        padding: 0 15px !important;
        vertical-align: bottom;
       
    }
    /*Настройка вкладок */
    .t228 .t-menu__link-item {
        height: inherit;
        display: table-cell !important;
        vertical-align: middle;
    }
    /*Цвет  вкладок при наведении */
    .t228__list_item:hover {
        background:#ffffff;
        -webkit-transition: all 0.6s ease-in-out;
        transition: all 0.6s ease-in-out;
    }
    .t228__list_item:hover .t-menu__link-item{
        color:#000 !important;  
    }
    
    /*Настройка для блока FT301 */
    [data-record-type="344"] {
        position: absolute;
        width: 100%;
        z-index: -1;
        left: 0;
        -ms-transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
        -o-transform: translateY(-100%);
    	-moz-transform: translateY(-100%);
         transform: translateY(-100%);
        -webkit-transition: all 0.6s ease-in-out;
        transition: all 0.6s ease-in-out;
    
    }
    /*Появление меню при наведении на вкладку */
    .t228__list_item:hover .mainmenu {
        display:block !important;
        -ms-transform: translateY(0%);
        -webkit-transform: translateY(0%);
        -o-transform: translateY(0%);
    	-moz-transform: translateY(0%);
        transform: translateY(0%);
    }
     .t344__col.t-col.t-col_3 {
        max-width: 180px;
        border-left: 1px solid #e2e2e2;
        margin-left: 0px;
        padding-left: 20px;
    }
    img.t344img {
        width: 250px;
        float: right;
    }
    .t344 li {
        transition: ease-in-out 0.5s;
    }
    /*Эффекты при наведении*/
    .t344 li:hover { 
        color: #000; /*Цвет текста*/
        padding-left: 5px; /*Сдвиг вправо*/
        border-left: 3px solid #000; /*Левая граница*/
        cursor:pointer;
    }    
    
    
    @media screen and (max-width: 1200px){
    .t344__col.t-col_3 {
        max-width: 140px !important;
    }
    }
    </style>
    
    <script>
    	$(document).ready(function(){
    	//Добавляем классы к блокам FT301  
    	$('[data-record-type="344"]').addClass('mainmenu');
    	//Добавляем блоки FT301 к соответствующим вкладкам в меню с указанием ID этого меню
           for(let i = 0; i < $(".mainmenu").length; i++){
           $('.mainmenu:eq('+i+')').appendTo('#rec136982174 .t228__list_item:eq('+i+')');
       };
       //Добавляем фото
        $('#rec136968790 .t-container').append('<img src="https://static.tildacdn.com/tild6631-3535-4565-a336-613732363239/1010Men_Flyout_nocop.jpg" class="t344img" imgfield="img">');
        $('#rec137341973 .t-container').append('<img src="https://static.tildacdn.com/tild3963-6361-4464-b733-363832313730/1010Women_Flyout_noc.jpg" class="t344img" imgfield="img">');
        $('#rec137341976 .t-container').append('<img src="https://static.tildacdn.com/tild3534-3833-4631-a331-346535636166/20190924-flyout-home.jpg" class="t344img" imgfield="img">');
       
    });
    </script>
    Made on
    Tilda