折り畳みサイドメニューを作りたい。

CSS, HTML, Javascript

はい、作りました。

HTML

<div id="btn">ボタン</div>
<aside id="side">
  <nav>
    <ul>
      <li><a href="">abc</a></li>
      <li><a href="">def</a></li>
      <li><a href="">ghi</a></li>
      <li><a href="">jkl</a></li>
      <li><a href="">mno</a></li>
    </ul>
  </nav>
</aside>

CSS

/*リセットcss*/
body {
  margin: 0;
}
a {
	text-decoration: none;
}
ul {
	padding: 0;
	margin: 0;
}
li {
	list-style: none;
}
li a {
	display: block;
	padding: 10px;
	border-bottom: solid 1px #bbb;
}



#btn {
	font-weight: bold;
	padding: 10px;
	border: solid;
	border-left: 0;
	border-radius: 0 8px 8px 0;
	width: 50px;
	cursor: pointer;
	transition: 0.2s;
	position: fixed;
	top: 0;
}
#side {
	position: absolute;
	top: 0;
	width: 150px;
	height: auto;
	background-color: #000;
	transform: translateX(-300px);
	transition: 0.2s;
}
#side a {
	color: #fff;
}

Javascript

const side = document.querySelector('#side');
const btn = document.querySelector('#btn');
btn.addEventListener('click', e => {
	side.classList.toggle('on');
	btn.classList.toggle('on');
	if( side.classList.contains('on') || btn.classList.contains('on') == true ){
			side.style.transform = 'translateX(0px)';
			btn.style.transform = 'translateX(150px)';
			btn.innerHTML = '閉じる';
	}else {
		side.style.transform = 'translateX(-150px)';
		btn.style.transform = 'translateX(0px)';
		btn.innerHTML = 'ボタン';
	}
});

サンプル

と、こんな感じで。