一個建議是使用#id而不是.class通過使用來獲取唯一元素getElementById。否則，如果您使用getElementsByClass.
我還建議：
a) 使用transform: translate而不是動畫，left因為 left 會導致重新計算所有元素，而 transform 只考慮移動元素，并且
b) 切換一個類而navEl.classList.toggle()不是在你的方法中查找樣式屬性。
不要介意CSS。這主要是為了設置東西。
let navEl = document.getElementById("nav");
let hamburgerEl = document.getElementById("hamburger");
hamburgerEl.addEventListener("click", toggleMenu);
function toggleMenu() {
navEl.classList.toggle("open");
}
#nav {
position: fixed;
left: 0px;
top: 0px;
width: 200px;
height: 400px;
padding: 1rem; /* 'rem' is the size of the font in the body element */
text-align: center;
background-color: lightblue;
border-right: 1px solid darkgrey;
transform: translateX(-100%);
transition: transform 400ms;
}
#nav.open { /* the event listener toggles this class */
transform: translateX(0px);
}
#hamburger {
position: relative; /* in order to use z-index to place #hamburger over the menu */
z-index: 100;
width: 20px;
height: 20px;
display: flex; /* to center the strokes */
align-items: center;
cursor: pointer;
}
#strokes,
#strokes::before,
#strokes::after
{
width: 100%;
height: 2px;
background-color: black;
}
#strokes::before, /* pseudo-elements */
#strokes::after {
content: '';
display: block;
}
#strokes::before {
transform: translateY(-6px);
}
#strokes::after {
transform: translateY(4px);
}
<body>
<div id="nav">
MENU
</div>
<div id="hamburger">
<div id="strokes"></div>
</div>
</body>
