Выезжающее боковое меню только на CSS мобильное
Если Вы так-же как и я разбираетесь в CSS и верстке, то Вам ни раз приходилось думать о том как-же правильно сверстать боковое меню на мобильных устройствах. Скажу правду, я даже думал прибегнуть к коду на JS, но вовремя нашёл решение исключительно на CSS, пример решения тут.
Для того чтобы меню работало, необходимо чекбокс распологать рядом с выезжающим блоком меню.
Для удобства ширину стилей необходимо поправить до 100%, также со всеми смещениями, 100%, -100%.
position у бутерброда можно сменить с fixed на absolute или relative;
.nav - можно убрать background
[id='nav-toggle']:checked ~ .nav - тут нужно будет его прописать
[id="nav-toggle"]:checked ~ .nav Этому элементу position: fixed (Если параметр display не передавался, указать display: block;)
В итоге будет проще с прокруткой в всплывшем меню
[id='nav-toggle']:checked ~ .nav > .nav-toggle - добавив этот параметр, будет проще радктировать кнопку закрытия меню