Для написания выезжающего бокового меню можно следовать таким шагам: 1

1. В HTML-файле создать общий оборачивающий тег с классом wrapper для всех элементов. 1
2. Создать блок с классом menu, внутри которого будет иконка-бургер и список в виде ссылок. 1 Ссылки поместить в тег nav с классом menu-list. 1
3. Зафиксировать положение меню (position: fixed) сверху и слева окна браузера (left, top). 1 Задать ширину 25% от родителя wrapper и на всю высоту экрана. 1
4. Задать фоновый белый цвет, при клике меню должно плавно выезжать (transition: 0.5s). 1 В обычном состоянии меню должно быть спрятано (свойство transform: translateX задвинет меню по горизонтальной оси в невидимую область влево на 100%). 1
5. При клике по иконке вернуть меню обратно (класс menuactive). 1 Для этого прописать код: .menuactive { transform: translateX(0%)}. 1
6. К стилям для ссылок меню применить flex-метод для выравнивания по центру, space-around создаст между ними равное расстояние. 1 .menu-list { display: flex; justify-content: space-around; align-items: center;}
7. Стилизовать сами ссылки: убрать подчёркивание (text-decoration), сделать большими заглавными буквами (text-transform), цвет как у фона (color) и добавить жирности для шрифта (font-weight). 1 .menu-list a { text-decoration: none; text-transform: uppercase; font-weight:900; color:#9b59b6;}
8. Задать бургер-иконке белый цвет, сделать её побольше (font-size: 150%) и расположить абсолютно по отношению к окну браузера, играя со значениями — right и top. 1 .menu-icon { color:#fff; font-size:150%; position: absolute; right:-35px; top:10px;}

Также для создания выезжающей боковой панели можно использовать флажок checkbox и средства CSS, при этом не потребуется скриптов. 2 В этом случае обязательным условием является, чтобы боковая панель следовала сразу за флажком checkbox. 2

Выбор метода зависит от личных предпочтений и потребностей разработчика.