Как сделать прайс-лист с боковым меню из блоков TX16N и PL310 в Tilda
Dessert Menu
  • Dessert Menu One
  • Dessert Menu Two
  • Dessert Menu Three
  • Dessert Menu Four
  • Dessert Menu Five
  • Dessert Menu Six
Special Menu
  • Special Menu One
  • Special Menu Two
  • Special Menu Three
  • Special Menu Four
  • Special Menu Five
New Menu
  • New Menu One
  • New Menu Two
  • New Menu Three
  • New Menu Four
  • New Menu Five
  • New Menu Six
  • New Menu Seven
  • New Menu Eight
Get a free lesson
Just type your contacts
It's totally free

Как сделать прайс-лист с боковым меню из блоков TX16N и PL310 в Tilda

1
Создали блок TX16N
12 колонок
- Текст первой карточки раскрыт сразу
- Отображать только одну раскрытую карточку
2
Добавили в описание пункты меню и сделали их маркированным списков (скрин ниже)
3
Создали отдельную страницу и там расположили блоки PL310 ( в данном примере 19 блоков)
4
Добавили код в блок Другое - Т123
На странице с TX16N
В коде прописали ссылку на страницу с блоками PL310
let contentLink = 'https://mo-ti.ru/static-form'
Библиотека для примера
<script>
$(document).ready(function(){
let tx16n = $('div[data-record-type="585"]'); 
tx16n.find('.t-container').wrapInner('<div class="left_side"></div>').append('<div class="right_side">');
tx16n.find('.t-container').wrapInner('<div class="wrapper_side"></div>');

let contentLink = 'https://mo-ti.ru/static-form'
let contentBlock = 'div[data-record-type="812"]';
$('.right_side').load(contentLink+' '+contentBlock+':first');
$('.left_side .t585__text li:first').addClass('active-li');
$(document).on('click','.left_side .t585__content li',function(e){ 
    if( !$(this).hasClass('active-li')){
        $('.left_side .t585__content li').removeClass('active-li');
        $(this).addClass('active-li');
        let cont = $(this).closest('.left_side');
        let indexLi = $('.left_side li').index( $(this) );
        $('.right_side').load(contentLink+' '+contentBlock+':eq('+indexLi+')');
        if($(window).width()<620){
            let top = $('.right_side').offset().top-20;
            $('html, body').animate({scrollTop: top}, 600);                
        };
    };
});
});
</script>

<style>
.left_side {width: 30%}
.right_side {
    width: 70%;
    padding-left: 50px;
    padding-right: 20px;
    box-sizing: border-box;
    transition: all 0.3s ease-in-out;
}
.hide_side{opacity:0}
.wrapper_side { display: flex}
.wrapper_side .t-col {
    margin: 0;
    max-width: none;
}
.t812__pricelist-item+.t812__pricelist-item { margin-top: 15px}
.right_side .t-section__bottomwrapper { margin-top: 35px}
.right_side .t-section__title { margin-bottom: 15px}
.right_side .t-section__topwrapper {margin-bottom: 40px}
.right_side .t-section__bottomwrapper {margin-top: 35px}
.left_side .t585__textwrapper {padding: 0}
.t585__opened .t585__lines {
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
   }
   .t585__lines svg {
    display: none;
}
   .t585__lines::after {
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    background-image: url(https://static.tildacdn.com/lib/tildaicon/35656264-3035-4838-b266-623530623135/Layer_26.svg);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
}
.left_side .t-col:hover .t585__title { text-decoration: underline}
.left_side .t-col .t585__title {transition: all 0.3s ease-in-out}
.left_side .t585__opened .t585__title {text-decoration: underline}
.left_side .t585__text {margin-bottom: 10px}
.left_side .t585__text li {
    list-style-type: none;
    cursor: pointer;
    position: relative;
    padding-top: 6px;
    padding-bottom: 4px;
    transition: all 0.3s ease-in-out;
}
li.active-li,
.left_side .t585__text li:hover { padding-left: 20px}
.left_side .t585__text li:before {
    content: "";
    width: 0px;
    height: 1px;
    background-color: #000;
    position: absolute;
    top: 50%;
    left: 0;
    transition: all 0.3s ease-in-out;
}
.left_side .t585__text li.active-li:before,
.left_side .t585__text li:hover:before{ width: 15px}

@media screen and (max-width:940px){
.left_side {width: 40%}
.right_side {width: 60%}    
}
@media screen and (max-width:640px){
.wrapper_side {
    display: block;
}
.left_side{
    margin-bottom:50px;
    width: 100%;
}
.right_side {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
 
}
}
</style>
Made on
Tilda