Я пытаюсь создать Несколько скользящих боковых панелей , спрятанных снаружи правой стороны экрана.
Здесь прототип (, в которомЯ перевел их « почти » за правую сторону для лучшего понимания поведения ).
Соответствующая часть кода:
.container {
display:flex;
flex-direction:column;
position:absolute;
top:0;
right:0;
width:200px;
height:100%;
transform:translateX(150px); /*Should be 170px to place outside view*/
}
.side-panel {
display:flex;
}
.side-panel.open {
transform:translateX(-170px);
}
.content {
position:absolute;
top:0;
right:0;
width:calc(100% - 34px);
height:100%;
}
Как вы можете видеть, есть 3 боковые панели, каждая из которых открываема нажатием на ее желтую метку (обозначено как 1, 2, 3).В полупрозрачной области вы также можете видеть содержимое каждой панели, перекрытое.
Цель должна состоять в том, чтобы метки .toggle были сложены, как в примере, но их содержимое должно занимать всю высоту контейнера (можно увидеть, что когда панели закрываются справа, содержимое вэта ситуация фактически перекрывается благодаря их position:absolute, но когда вы откроете один из них, он будет ограничен его непосредственным гибким контейнером) так же, как вы можете видеть, когда они закрыты.
Пожалуйста,как решить?