Как добавить третий ряд меню в блок ME901 в Tilda
 
No Gun, Go Run is our Annual spring marathon in West Berlin

Как добавить третий ряд меню в блок ME901 в Tilda

1
Создали меню ME901
2
В пунктах, где нужен 3-ий ряд, назначили ссылку #thirdlvl
3
Добавили 1 код на страницу в блок Другое - Т123
Прописали пункты меню третьего ряда и их ссылки
4
Добавили 2 код на страницу в блок Другое - Т123
Прописали какие пункты добавить списки с 3-им меню
//Добавляем 3 ряд в нужные пункты $('.thirdstep0').appendTo('.prThirdlvl:eq(0)'); $('.thirdstep1').appendTo('.prThirdlvl:eq(1)'); $('.thirdstep2').appendTo('.prThirdlvl:eq(2)'); $('.thirdstep3').appendTo('.prThirdlvl:eq(3)');
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Добавляем дополнительный третий ряд в меню МЕ901. Создаём подписи и ссылки в собственной html разметке
Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера

<ul class="thirdstep0 menthird">
<a href="#chapter1"><li>Link_1</li></a>
<a href="#chapter2"><li>Link_2</li></a>
<a href="#chapter3"><li>Link_3</li></a>
<a href="#chapter4"><li>Link_4</li></a>
<a href="#chapter5"><li>Link_5</li></a>
<a href="#chapter6"><li>Link_6</li></a>
</ul>

<ul class="thirdstep1 menthird">
<a href="#chapter7"><li>Link_7</li></a>
<a href="#chapter8"><li>Link_8</li></a>
<a href="#chapter9"><li>Link_9</li></a>
<a href="#chapter10"><li>Link_10</li></a>
<a href="#chapter11"><li>Link_11</li></a>
<a href="#chapter12"><li>Link_12</li></a>
<a href="#chapter13"><li>Link_13</li></a>
<a href="#chapter14"><li>Link_14</li></a>
</ul>


<ul class="thirdstep2 menthird">
<a href="#chapter15"><li>Link_15</li></a>
<a href="#chapter16"><li>Link_16</li></a>
<a href="#chapter17"><li>Link_17</li></a>
<a href="#chapter18"><li>Link_18</li></a>
<a href="#chapter19"><li>Link_19</li></a>
<a href="#chapter20"><li>Link_20</li></a>
<a href="#chapter21"><li>Link_21</li></a>
<a href="/901thirdlevel"><li>Link_22</li></a>
<a href="#chapter23"><li>Link_23</li></a>
<a href="#chapter24"><li>Link_24</li></a>
<a href="#chapter25"><li>Link_25</li></a>
<a href="#chapter26"><li>Link_26</li></a>
</ul>

<ul class="thirdstep3 menthird">
<a href="#chapter27"><li>Link_27</li></a>
<a href="#chapter28"><li>Link_28</li></a>
<a href="#chapter29"><li>Link_29</li></a>
<a href="#chapter30"><li>Link_30</li></a>
<a href="#chapter31"><li>Link_31</li></a>
<a href="#chapter32"><li>Link_32</li></a>
<a href="#chapter33"><li>Link_33</li></a>
<a href="#chapter34"><li>Link_34</li></a>
<a href="#chapter35"><li>Link_35</li></a>
<a href="#chapter36"><li>Link_36</li></a>
<a href="#chapter37"><li>Link_37</li></a>
<a href="#chapter38"><li>Link_38</li></a>
</ul>


<style>
.menthird li{
     list-style-type: none; 
     font-weight: 400;
     line-height: 1.8;
}
ul.menthird {
    margin: 10px 10px 0;
    padding-left: 10px;
    opacity: 0.6;
}
ul.menthird{
    display: none;
}
.thirdlvl {
    position: relative;
    pointer-events:none;
    
}
.thirdlvl::before {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    top: 4px;
    left: -13px;
    background-image: url(https://static.tildacdn.com/tild3462-3065-4563-b633-636432336335/2089636.svg);
    background-size: 100%;
    transition: all 0.3s ease-in-out;
}
.thirdlvlopen::before{
    transform: rotate(180deg);
}
.prThirdlvl{
    cursor:pointer;
}
.thirdlvl:hover , .acthD {
    opacity: 0.5 !important;
}
ul.menthird a:hover , ul.menthird a.t-Thactive {
    color: #ff8562 !important;
}

#stThmenu ul.menthird a{
    color:#000000;    
    
}
.thRLink:hover a {
    color: #ff8562 !important;
}
</style>

<script>
    $(document).ready(function(){
       $('a[href="#thirdlvl"]').addClass('thirdlvl').wrap('<div class="prThirdlvl"></div>');
       $('a[href="#thirdlvl"]').wrap('<div class="thRLink"></div>');
       $('.t830m__menu').attr('id' , 'stThmenu');
   
    //Добавляем 3 ряд в нужные пункты
       $('.thirdstep0').appendTo('.prThirdlvl:eq(0)');
       $('.thirdstep1').appendTo('.prThirdlvl:eq(1)');
       $('.thirdstep2').appendTo('.prThirdlvl:eq(2)');
       $('.thirdstep3').appendTo('.prThirdlvl:eq(3)');

       setTimeout(function(){
         $('.menthird .t-Thactive').parent().slideDown(0)
         $('.menthird .t-Thactive').closest('.prThirdlvl').find('.thirdlvl').toggleClass('thirdlvlopen acthD');
         $('.menthird .t-Thactive').closest('.t830m__list-item').find('.t830m__list-title').click();
       }, 500);       
       $('.thRLink').click(function(){
           $(this).next('.menthird').slideToggle(500);
           $(this).children('.thirdlvl').toggleClass('thirdlvlopen acthD');
       });
    $('.menthird li').each(function () {
        var thLink = $(this).parent().attr('href').replace(/\//g, '');
        var locaturl = document.location.href.split('?')[0].replace(/\//g, '').slice(-thLink.length);
             if ( locaturl==thLink  ) {
            $(this).parent().addClass('t-Thactive');};   
    });
    $('.menthird a').click(function(e) {
       $('.menthird a').removeClass('t-Thactive');$(this).addClass('t-Thactive');
      });
    });
</script>
Made on
Tilda