The Darkberries
Concert and presentation of the new album «So Many Sounds In My Head»
Jun 14 | saturday
21.00 – 00.00
Hartwall Arena

Как создать меню "гамбургер" из ZeroBlock в полноэкранном режиме в Tilda

Для данной задачи используем функционал меню ME401

1. Создаём меню ME401 (настройки произведём позже)
2. Создаём ZeroBlock со 100% высотой
3. Добавляете на страницу скрипт.

В скрипте вставляем ID ZeroBlock
#rec49228109 - заменяем на свой ID

Скрипт вставляется в блок ДРУГОЕ►Т123
<style>
/*Ширина иконки*/
.t280__burger>img {
    width: 60px;
}
/*Эффект при наведении на иконку*/
.t280__burger>img{
   -webkit-transition: 0.5s ease-out;
    transition: 0.5s ease-out;
}
img.imgback {
    position: absolute;
    opacity:0;
}
img.imgfront {
    position: absolute;
}

.showicn{
    opacity:1 !important;
}
.noshowicn{
    opacity:0 !important;
}

</style>

<script>
var ZeroID = '#rec62087398';  //Прописываем ID 

$(".t280__menu__container").empty();
//Добавляем Zero вместо меню
$(ZeroID).appendTo(".t280__menu__container");

//Очищаем иконку
$(".t280__burger").empty();
//Помещаем своё фото вместо иконки
$(".t280__burger").append("<img class = 'imgback' src='https://clck.ru/Dym5K' imgfield='img'>");
$(".t280__burger").append("<img class = 'imgfront' src='https://clck.ru/Dykp2' imgfield='img'>");

$( ".imgfront" ).hover(
  function() {
   $(this).css('opacity' , '0');
   $('.imgback').css('opacity' , '1');
  }, function() {
   $(this).css('opacity' , '1');
   $('.imgback').css('opacity' , '0');
  }
);

var switcher = 0;
 $('.imgfront').click(function(){
       if (switcher == 0) {
       $(this).addClass("noshowicn");
       $('.imgback').addClass("showicn");
       switcher = 1;
       }else{
       $(this).removeClass("noshowicn");
       $('.imgback').removeClass("showicn");    
       switcher = 0;
       };
});

//При клике на пункт меню в ZeroBlock закрываем его
  $(ZeroID  + " " + "a").click(function(){
  $(".imgfront")[0].click();    
});   
</script>
Made on
Tilda