Как увеличить кол-во вкладок в меню ME602 для Tilda
Lamborghini
Asterion
Lamborghini
Avendator
Lamborghini
Centenario
Lamborghini
Diablo
Lamborghini
Elemento
Lamborghini
Estoque
Lamborghini
Gallardo
Lamborghini
Huracan
Lamborghini
Murcielago
Lamborghini
Reventon
Lamborghini
Urus
Lamborghini
Veneno

Как увеличить кол-во вкладок в меню ME602 для Tilda

1
Первые 5 вкладок создаём штатно, остальные добавляем через скрипт
2
В примере использованы блоки:
МЕ602 + IM07
В настройках ME602 удалили цвет и толщину границы border

Скрипт добавляется в блок ДРУГОЕ►Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Добавляем новые вкладки в блок ME602, изменяем ширину блока в пикселях и процентах.
Длительность видео: 31 минута
Фрагмент видео
Библиотека для примера

<script type="text/javascript">
   //Добавляем новые вкладки в наше меню
   //В поле data-tab-rec-ids="39707098"   прописываете номера показываемых блоков для этой вкладки
   //В этом месте >Estoque< прописываете надпись для вкладки
   //Чтобы уменьшить кол-во вкладок просто удалите нижние строки
/*6 вкладка*/ $('.t395__wrapper').append('<div class="t395__tab t395__width_20" data-tab-rec-ids="165975858"><div class="t395__title t-name t-name_xs">Estoque</div></div>');
/*7 вкладка*/ $('.t395__wrapper').append('<div class="t395__tab t395__width_20" data-tab-rec-ids="165975859"><div class="t395__title t-name t-name_xs">Gallardo</div></div>');
/*8 вкладка*/ $('.t395__wrapper').append('<div class="t395__tab t395__width_20" data-tab-rec-ids="165975860"><div class="t395__title t-name t-name_xs">Huracan</div></div>');
/*9 вкладка*/ $('.t395__wrapper').append('<div class="t395__tab t395__width_20" data-tab-rec-ids="165975861"><div class="t395__title t-name t-name_xs">Murcielago</div></div>');
/*10 вкладка*/ $('.t395__wrapper').append('<div class="t395__tab t395__width_20" data-tab-rec-ids="165975862"><div class="t395__title t-name t-name_xs">Reventon</div></div>');
/*11 вкладка*/ $('.t395__wrapper').append('<div class="t395__tab t395__width_20" data-tab-rec-ids="165975863"><div class="t395__title t-name t-name_xs">Urus</div></div>');
/*12 вкладка*/ $('.t395__wrapper').append('<div class="t395__tab t395__width_20" data-tab-rec-ids="165975864"><div class="t395__title t-name t-name_xs">Veneno</div></div>');


/*6 вкладка*/ $(".t395__select").append( $('<option value="165975858">Estoque</option>'));
/*7 вкладка*/ $(".t395__select").append( $('<option value="165975859">Gallardo</option>'));
/*8 вкладка*/ $(".t395__select").append( $('<option value="165975860">Huracan</option>'));
/*9 вкладка*/ $(".t395__select").append( $('<option value="165975861">Murcielago</option>'));
/*10 вкладка*/ $(".t395__select").append( $('<option value="165975862">Reventon</option>'));
/*11 вкладка*/ $(".t395__select").append( $('<option value="165975863">Urus</option>'));
/*12 вкладка*/ $(".t395__select").append( $('<option value="165975864">Veneno</option>'));

//Удаляем класс для снятия ограничения по ширине
   $(".t395__col.t-width.t-width_12").removeClass("t-width_12");

</script>

<style>
    /*Применяем стили к новым вкладкам */
    .t395__title{
      color:#000000;
      font-size:14px;
      font-weight:400;
      padding-top:14px;
      padding-bottom:14px;  
}     
    /*Фиксируем высоту новых вкладок */
    .t395__tab_active .t395__title {
      padding-bottom: 14px;
      padding-top: 14px;
}
    /*Распределяем вкладки по ширине 180px */
    .t395__width_20 {
      width: 180px;
}
  /*Ширина контейнера*/
   .t395 .t-container {
    max-width: 1160px;
}

   /*Привязка слева друг от друга */
  .t395__tab{ 
   display: inline-block;      
   outline: 1px solid #000;
}

    /*Эффект наведения на вкладки*/
   .t395__tab:hover{
      box-shadow: 0px 1px 5px 0px #000000;	
       
   }
     /*Тень для фото*/
   .t196__img {
      box-shadow: 0px 0px 2px 1px #FFFFFF;
   }
     /*Отображать свёрнутое меню до такой ширины*/
    @media screen and (max-width: 650px) {
  
    .t395__wrapper_mobile {
      display: block;
}     
}
     /*Отображать развёрнутое меню до такой ширины*/
    @media screen and (max-width: 650px) {
  
   .t395__wrapper {
      display: none !important;
}     
}


</style>
Made on
Tilda