Asterion
Avendator
Centenario
Diablo
Elemento
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

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

Скрипт добавляется в блок ДРУГОЕ►Т123

<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="39707098"><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="39707108"><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="39707132"><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="39707146"><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="39707171"><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="39707189"><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="39707216"><div class="t395__title t-name t-name_xs">Veneno</div></div>');


/*6 вкладка*/ $(".t395__select").append( $('<option value="39707098">Estoque</option>'));
/*7 вкладка*/ $(".t395__select").append( $('<option value="39707108">Gallardo</option>'));
/*8 вкладка*/ $(".t395__select").append( $('<option value="39707132">Huracan</option>'));
/*9 вкладка*/ $(".t395__select").append( $('<option value="39707146">Murcielago</option>'));
/*10 вкладка*/ $(".t395__select").append( $('<option value="39707171">Reventon</option>'));
/*11 вкладка*/ $(".t395__select").append( $('<option value="39707189">Urus</option>'));
/*12 вкладка*/ $(".t395__select").append( $('<option value="39707216">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 !important;
}

   /*Привязка слева друг от друга */
  .t395__tab{ 
   float: left;
}

    /*Эффект наведения на вкладки*/
   .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