ME602 + ICONS

1
Сервис
О продукте
Форматы
Доставка
Отзывы

2
Сервис
О продукте
Форматы
Доставка
Отзывы

3
Сервис
О продукте
Форматы
Доставка
Отзывы

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

Left
Right

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

1. Создали блок ME602 5 вкладок
2. Добавили код в блок ДРУГОЕ►T123

Заменили ссылки иконок
https://clck.ru/EUTny
<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
В данном примере добавляем иконки НАД описанием кнопки
Как выполнили данный пример:

1. Создали блок ME602 5 вкладок
2. Добавили код в блок ДРУГОЕ►T123

Заменили ссылки иконок
https://clck.ru/EUTny
<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
В данном примере добавляем иконки при цветном фоне при наведении
Как выполнили данный пример:

1. Создали блок ME602 5 вкладок
2. Добавили код в блок ДРУГОЕ►T123

Заменили ссылки иконок
Зелёная
src="https://goo.gl/85BRUF" class="meiconchange icontwo t-img"
Белая
src="https://goo.gl/Y2cJkg" class="meiconchange iconeone t-img"
<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;
    }

</style>

<script>
//Добавляем иконки в каждую вкладку    
$( document ).ready(function() {
//Создаеём общий блок иконок    
  $(".t395__tab").prepend('<div class="iconplace"></div>');      
  $(".iconplace:eq(0)").prepend('<img src="https://goo.gl/85BRUF" class="meiconchange icontwo t-img" imgfield="img">');
  $(".iconplace:eq(0)").prepend('<img src="https://goo.gl/Y2cJkg" 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">');


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