Как правильно оформить вертикальное меню и контент?

Question

[eantava]

Привет всем, решил впервые попробовать сверстать сайт с вертикальным меню прижатым к левому краю и контентом в центре экрана. Как правильно оформить код? Для меня это в новинку, может кто подскажет как лучше сделать или кинет ссылку на хорошую статью?
Я сделал примерно так, в body

<div class+="body">
    <div class=" right-menu"> здесь меню </div>
    <div class="left-content"> контент страницы </div>
</div>

Для body в стилях прописан дисплей flex.
Для right-menu прописана фиксированная ширина и высота на авто, дисплей flex и flex-direction columm, а в нем для блока меню прописана позиция stiky чтобы меню двигалось вместе со скролом.
Для left-content прописана фиксированная ширина контента и margin 0 auto.
Проблема в том что при адаптации на мобильные устройства колонка слева с меню занимает часть экрана. Всем заранее спасибо)

Comments

[Ankhena]

Проблема в том что при адаптации на мобильные устройства колонка слева с меню занимает часть экрана.

Значит, при уменьшении экрана эту колонку нужно убирать в бургер либо по другому располагать блоки.

Тут дело в том, что нужно сначала придумать как оно себя должно вести, а потом переформулировать вопрос на какую-то конкретику.

Answer 1

[chincharovpc]

Меню для планшетов и мобильных устройств нужно сделать с абсолютным позиционированием или скрыть за страницей с помощью transform...
В верхней части шапки расположить кнопку для открытия меню.
При нажатии на кнопку слева отображается меню и при нажатии на пустое пространство или крестик, то исчезает. (нужен javascipt)
Вот пример, смотри в моб версии