Как добавить иконки в меню ME602 в Tilda
 
ME602 + ICONS
1
2
3

Как добавить иконки в меню ME602 в Tilda

1
В данном примере добавляем иконки под описание кнопки
Как выполнили данный пример:
Создали блок ME602 5 вкладок

2
Добавили код в блок ДРУГОЕ►T123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Добавляем иконки в блок ME602. Делаем вид на мобильном , как на десктопе, а затем на десктопе как на мобильном. Длительность видео: 33 мин
Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера
1

<style>
/*Размер иконок и отступ снизу*/
    .meiconbottom{
        width:34px;
        padding-bottom: 10px;
    }
/*Внутренняя тень на вкладке*/    
     .t395__tab_active {
       box-shadow: 0px 0px 33px 3px #cacaca inset;
} 
/*Скорость и характер анимации*/
    .t395__tab {
        transition: all 0.7s cubic-bezier(0, 0, 0.8, 1.0);
} 
/*Внутренняя тень при наведении*/
     .t395__tab:hover {
       box-shadow: 0px 0px 33px 3px #cacaca inset;
}  
</style>
<script>
$( document ).ready(function() {
//Добавляем фото в каждую вкладку    
  $(".t395__tab:eq(0) ").append('<img src="https://clck.ru/EUTny" class="meiconbottom t-img" imgfield="img">');
  $(".t395__tab:eq(1) ").append('<img src="https://clck.ru/EUThq" class="meiconbottom t-img" imgfield="img">');
  $(".t395__tab:eq(2) ").append('<img src="https://clck.ru/EUThw" class="meiconbottom t-img" imgfield="img">');
  $(".t395__tab:eq(3) ").append('<img src="https://clck.ru/EUTiA" class="meiconbottom t-img" imgfield="img">');
  $(".t395__tab:eq(4) ").append('<img src="https://clck.ru/EUTiS" class="meiconbottom t-img" imgfield="img">');
});
</script>
2

<style>
/*Размер иконок и отступ сверху*/
    .meicontop{
        width:34px;
        padding-top: 10px;
    }
/*Внутренняя тень на вкладке*/        
    .t395__tab_active {
       box-shadow: 0px 0px 33px 3px #cacaca inset;
}  
/*Скорость и характер анимации*/
    .t395__tab {
        transition: all 0.7s cubic-bezier(0, 0, 0.8, 1.0);
}   
/*Внутренняя тень при наведении*/
    .t395__tab:hover {
       box-shadow: 0px 0px 33px 3px #cacaca inset;
}  
</style>

<script>
$( document ).ready(function() {
//Добавляем фото в каждую вкладку        
  $(".t395__tab:eq(0) ").prepend('<img src="https://clck.ru/EUTny" class="meicontop t-img" imgfield="img">');
  $(".t395__tab:eq(1) ").prepend('<img src="https://clck.ru/EUThq" class="meicontop t-img" imgfield="img">');
  $(".t395__tab:eq(2) ").prepend('<img src="https://clck.ru/EUThw" class="meicontop t-img" imgfield="img">');
  $(".t395__tab:eq(3) ").prepend('<img src="https://clck.ru/EUTiA" class="meicontop t-img" imgfield="img">');
  $(".t395__tab:eq(4) ").prepend('<img src="https://clck.ru/EUTiS" class="meicontop t-img" imgfield="img">');
});
</script>
3

<style>
/*Размер иконок и отступ сверху*/
    .meiconchange{
        width:34px;
        padding-top: 10px;
    }
/*Внутренняя тень на вкладке*/    
    .t395__tab_active {
       box-shadow: 0px 0px 33px 3px #cacaca inset;
}   
/*Скорость и характер анимации*/
    .t395__tab {
        transition: all 0.4s cubic-bezier(0, 0, 0.8, 1.0);
}  
/*Внутренняя тень при наведении*/
    .t395__tab:hover {
       box-shadow: 0px 0px 33px 3px #cacaca inset;
}
/*Положение одной из иконок*/
    .iconeone {
        position: absolute;
    }
    .invisible {
        opacity:0;
    }

li.t395__tab {
    cursor: pointer;
}

</style>

<script>
//Добавляем иконки в каждую вкладку    
$( document ).ready(function() {
//Создаеём общий блок иконок    
  $(".t395__tab").prepend('<div class="iconplace"></div>');      
  $(".iconplace:eq(0)").prepend('<img src="https://static.tildacdn.com/tild3861-6365-4631-a664-653330393266/24-hours_1.svg" class="meiconchange icontwo t-img" imgfield="img">');
  $(".iconplace:eq(0)").prepend('<img src="https://static.tildacdn.com/tild3964-3030-4638-b936-326263323337/24-hours.svg" class="meiconchange iconeone t-img" imgfield="img">');
  $(".iconplace:eq(1)").prepend('<img src="https://clck.ru/EUThq" class="meiconchange icontwo t-img" imgfield="img">');
  $(".iconplace:eq(1)").prepend('<img src="https://clck.ru/EUY3w" class="meiconchange iconeone t-img" imgfield="img">');
  $(".iconplace:eq(2)").prepend('<img src="https://clck.ru/EUThw" class="meiconchange icontwo t-img" imgfield="img">');
  $(".iconplace:eq(2)").prepend('<img src="https://clck.ru/EUY5R" class="meiconchange iconeone t-img" imgfield="img">');
  $(".iconplace:eq(3)").prepend('<img src="https://clck.ru/EUTiA" class="meiconchange icontwo t-img" imgfield="img">');
  $(".iconplace:eq(3)").prepend('<img src="https://clck.ru/EUY5z" class="meiconchange iconeone t-img" imgfield="img">');
  $(".iconplace:eq(4)").prepend('<img src="https://clck.ru/EUTiS" class="meiconchange icontwo t-img" imgfield="img">');
  $(".iconplace:eq(4)").prepend('<img src="https://clck.ru/EUY6D" class="meiconchange iconeone t-img" imgfield="img">');


//Добавлеем класс с осветлением к иконке активной вкладки  
  $(' .t395__tab_active .icontwo').removeClass('invisible');
//При нажатии на вкладку    
  $( ".t395__tab" ).click(function() {
    
     setTimeout(function () {
        //Скрываем белые иконки  
         $('.iconeone').addClass('invisible'); 
        //Показываем зелёные 
         $('.icontwo').removeClass('invisible');
        //Показываем активную белую 
         $('.t395__tab_active .iconeone').removeClass('invisible');
     }, 200);
});    
});
</script>
Made on
Tilda