javascript-菜单在页面加载时打开

下午好

我在我的网站上使用了一个带有铃声的菜单，但这个菜单在网站加载时打开。我试图用javascript切换代码，但没有成功。 仅当单击按钮时，菜单才能打开

我在这里留下了所有的菜单代码（CSS），以便更容易地看到问题

（对不起，我的英语不好） 提前谢谢

toggle=document.querySelectorAll（“.toggle”）[0]；
nav=document.queryselectoral（“nav”）[0]；
切换_open_text='☰；'；
切换_close_text='✖；'；
nav.classList.toggle（'open'）；
toggle.addEventListener（'click'，function（）{
nav.classList.toggle（'open'）；
if（nav.classList.contains（'open'））{
toggle.innerHTML=切换\关闭\文本；
}否则{
toggle.innerHTML=切换打开文本；
}
}，假）；
setTimeout（函数（）{
nav.classList.toggle（'open'）；
}, 800);
@导入url（“https://fonts.googleapis.com/css?family=Titillium+网站);；
/*html，正文{
身高：100%；
}
身体{
背景：米色；
字体系列：Alegreya Sans，Sans serif；
}
*/
导航{
显示：块；
位置：固定；
宽度：500px；
高度：500px；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
-webkit转换：translate3d（25px，-25px，0）；
转换：translate3d（25px，-25px，0）；
过渡：-webkit变换0.5s三次贝塞尔（0.3,1.4,0.5,0.9）；
变换：变换0.5s三次贝塞尔（0.3,1.4,0.5,0.9）；
变换：变换0.5s立方贝塞尔（0.3,1.4,0.5,0.9），-webkit变换0.5s立方贝塞尔（0.3,1.4,0.5,0.9）；
}
导航开放{
-webkit转换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
}
导航右上角{
顶部：-140px；
右：-140px；
}
.光盘{
位置：绝对位置；
显示：内联块；
文本对齐：居中；
光标：指针；
字体：25px钛合金网，无衬线；
线高：40px；
填充顶部：10px；
边界半径：250px；
-webkit变换：缩放3D（0.5,0.5,0.5）旋转3D（0,0,1,190度）；
变换：缩放3d（0.5,0.5,0.5）旋转3d（0,0,1,190度）；
指针事件：无；
不透明度：0；
光标：指针；
过渡：不透明度0.5s，-webkit变换0.5s立方贝塞尔（0.3,1.4,0.5,0.9）；
变换：变换0.5s三次贝塞尔（0.3,1.4,0.5,0.9），不透明度0.5s；
变换：变换0.5s立方贝塞尔（0.3,1.4,0.5,0.9），不透明度0.5s，-webkit变换0.5s立方贝塞尔（0.3,1.4,0.5,0.9）；
}
.唱片部{
-webkit变换：旋转（180度）；
变换：旋转（180度）；
}
.打开.光盘{
指针事件：自动；
不透明度：1；
}
.l1{
顶部：0px；
左：0px；
右：0px；
底部：0px；
背景#627ca9；
转换延迟：0s；
}
.open.l1{
转换延迟：0s；
-webkit变换：缩放3D（1,1,1）旋转3D（0,0,1,190度）；
变换：缩放3d（1,1,1）旋转3d（0,0,119deg）；
不透明度：1；
}
.打开。l1:悬停{
背景：阴影（90%）；
颜色：#627ca9；
转换延迟：0s；
}
.打开。l1:激活{
背景：阴影（50%）；
颜色：#627ca9；
}
.open.l1.toggle{
-webkit变换：缩放3D（0.9,0.9,0.9）旋转3D（0,0,1,10度）；
变换：缩放3d（0.9,0.9,0.9）旋转3d（0,0,1,10度）；
}
.l2{
顶部：50px；
左：50px；
右：50px；
底部：50px；
背景#627ca9；
过渡延迟：0.1s；
}
.open.l2{
过渡延迟：0.1s；
-webkit变换：缩放3D（1,1,1）旋转3D（0,0,1,190度）；
变换：缩放3d（1,1,1）旋转3d（0,0,119deg）；
不透明度：1；
}
.open.l2:悬停{
背景：阴影（90%）；
颜色：#627ca9；
转换延迟：0s；
}
.open.l2：活动{
背景：阴影（50%）；
颜色：#627ca9；
}
.open.l2.toggle{
-webkit变换：缩放3D（0.9,0.9,0.9）旋转3D（0,0,1,10度）；
变换：缩放3d（0.9,0.9,0.9）旋转3d（0,0,1,10度）；
}
.l3{
顶部：100px；
左：100px；
右：100px；
底部：100px；
背景#627ca9；
过渡延迟：0.2s；
}
.打开。l3{
过渡延迟：0.2s；
-webkit变换：缩放3D（1,1,1）旋转3D（0,0,1,190度）；
变换：缩放3d（1,1,1）旋转3d（0,0,119deg）；
不透明度：1；
}
.打开。l3:悬停{
背景：阴影（90%）；
颜色：#627ca9；
转换延迟：0s；
}
.打开。l3:激活{
背景：阴影（50%）；
颜色：#627ca9；
}
.open.l3.toggle{
-webkit变换：缩放3D（0.9,0.9,0.9）旋转3D（0,0,1,10度）；
变换：缩放3d（0.9,0.9,0.9）旋转3d（0,0,1,10度）；
}
.l4{
顶部：150px；
左：150px；
右：150px；
底部：150px；
背景#627ca9；
过渡延迟：0.3s；
}
.打开{
过渡延迟：0.3s；
-webkit变换：缩放3D（1,1,1）旋转3D（0,0,1,190度）；
变换：缩放3d（1,1,1）旋转3d（0,0,119deg）；
不透明度：1；
}
.打开。l4:悬停{
背景：阴影（90%）；
颜色：#627ca9；
转换延迟：0s；
}
.打开。l4：激活{
背景：阴影（50%）；
颜色：#627ca9；
}
.open.l4.toggle{
-webkit变换：缩放3D（0.9,0.9,0.9）旋转3D（0,0,1,10度）；
变换：缩放3d（0.9,0.9,0.9）旋转3d（0,0,1,10度）；
}
.l5{
顶部：200px；
左：200px；
右：200px；
底部：200px；
背景#627ca9；
过渡延迟：0.4s；
}
.打开。l5{
过渡延迟：0.4s；
-webkit变换：缩放3D（1,1,1）旋转3D（0,0,1,190度）；
变换：缩放3d（1,1,1）旋转3d（0,0,119deg）；
不透明度：1；
}
.打开。l5：悬停{
背景：阴影（90%）；
颜色：#627ca9；
转换延迟：0s；
}
.打开。l5：激活{
背景：阴影（50%）；
颜色：#627ca9；
}
.open.l5.toggle{
-webkit变换：缩放3D（0.9,0.9,0.9）旋转3D（0,0,1,10度）；
变换：缩放3d（0.9,0.9,0.9）旋转3d（0,0,1,10度）；
}
.切换{
线高：100px；
填充：0；
宽度：100px；
背景#627ca9；
不透明度：1；
-webkit转换：无；
转化：无；
指针事件：自动；
转换延迟：0s；
}
.打开。切换{
-webkit tran
setTimeout(function(){
    nav.classList.toggle('open');   
}, 800);