javascript - javascript - 菜单在页面加载时打开
问题描述
下午好
我在我的网站上使用了一个带有环的菜单,但是当网站加载时这个菜单会打开。我试图用javascript切换代码但没有成功。菜单只能在单击按钮时打开。
我把所有的菜单代码 (CSS) 都留在这里,以便更容易看到问题。
(对不起我的英语不好)提前谢谢。
toggle = document.querySelectorAll(".toggle")[0];
nav = document.querySelectorAll("nav")[0];
toggle_open_text = '☰';
toggle_close_text = '✖';
nav.classList.toggle('open');
toggle.addEventListener('click', function() {
nav.classList.toggle('open');
if (nav.classList.contains('open')) {
toggle.innerHTML = toggle_close_text;
} else {
toggle.innerHTML = toggle_open_text;
}
}, false);
setTimeout(function(){
nav.classList.toggle('open');
}, 800);
@import url("https://fonts.googleapis.com/css?family=Titillium+Web");
/*html, body {
height: 100%;
}
body {
background: beige;
font-family: Alegreya Sans, sans-serif;
}
*/
nav {
display: block;
position: fixed;
width: 500px;
height: 500px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transform: translate3d(25px, -25px, 0);
transform: translate3d(25px, -25px, 0);
transition: -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9), -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
}
nav.open {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
nav.top-right {
top: -140px;
right: -140px;
}
.disc {
position: absolute;
display: inline-block;
text-align: center;
cursor: pointer;
font: 25px Titillium Web, sans-serif;
line-height: 40px;
padding-top: 10px;
border-radius: 250px;
-webkit-transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 0, 1, 190deg);
transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 0, 1, 190deg);
pointer-events: none;
opacity: 0;
cursor: pointer;
transition: opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9), opacity 0.5s;
transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9), opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
}
.disc div {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.open .disc {
pointer-events: auto;
opacity: 1;
}
.l1 {
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: #627ca9;
transition-delay: 0s;
}
.open .l1 {
transition-delay: 0s;
-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
opacity: 1;
}
.open .l1:hover {
background: shade(#627ca9, 90%);
color: #627ca9;
transition-delay: 0s;
}
.open .l1:active {
background: shade(#627ca9, 50%);
color: #627ca9;
}
.open .l1.toggle {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
}
.l2 {
top: 50px;
left: 50px;
right: 50px;
bottom: 50px;
background: #627ca9;
transition-delay: 0.1s;
}
.open .l2 {
transition-delay: 0.1s;
-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
opacity: 1;
}
.open .l2:hover {
background: shade(#627ca9, 90%);
color: #627ca9;
transition-delay: 0s;
}
.open .l2:active {
background: shade(#627ca9, 50%);
color: #627ca9;
}
.open .l2.toggle {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
}
.l3 {
top: 100px;
left: 100px;
right: 100px;
bottom: 100px;
background: #627ca9;
transition-delay: 0.2s;
}
.open .l3 {
transition-delay: 0.2s;
-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
opacity: 1;
}
.open .l3:hover {
background: shade(#627ca9, 90%);
color: #627ca9;
transition-delay: 0s;
}
.open .l3:active {
background: shade(#627ca9, 50%);
color: #627ca9;
}
.open .l3.toggle {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
}
.l4 {
top: 150px;
left: 150px;
right: 150px;
bottom: 150px;
background: #627ca9;
transition-delay: 0.3s;
}
.open .l4 {
transition-delay: 0.3s;
-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
opacity: 1;
}
.open .l4:hover {
background: shade(#627ca9, 90%);
color: #627ca9;
transition-delay: 0s;
}
.open .l4:active {
background: shade(#627ca9, 50%);
color: #627ca9;
}
.open .l4.toggle {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
}
.l5 {
top: 200px;
left: 200px;
right: 200px;
bottom: 200px;
background: #627ca9;
transition-delay: 0.4s;
}
.open .l5 {
transition-delay: 0.4s;
-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
opacity: 1;
}
.open .l5:hover {
background: shade(#627ca9, 90%);
color: #627ca9;
transition-delay: 0s;
}
.open .l5:active {
background: shade(#627ca9, 50%);
color: #627ca9;
}
.open .l5.toggle {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
}
.toggle {
line-height: 100px;
padding: 0;
width: 100px;
background: #627ca9;
opacity: 1;
-webkit-transform: none;
transform: none;
pointer-events: auto;
transition-delay: 0s;
}
.open .toggle {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
.toggle:hover {
background: shade(#627ca9, 90%);
color: #627ca9;
}
.toggle:active {
background: shade(#627ca9, 50%);
color: rgba(255, 215, 0, 0.5);
-webkit-transform: scale(0.9);
transform: scale(0.9);
transition-duration: 0s;
}
<nav style="opacity:0.9;" class="top-right open">
<a style="color:#FFFFFF" href="index.html" class="disc l1">
<div>#ROCKON</div>
</a>
<a style="color:#FFFFFF" href="player-hd/top10.html" class="disc l2">
<div>VOTE</div>
</a>
<a style="color:#FFFFFF" href="player-hd/podcasts.html" class="disc l3">
<div>PODCASTS</div>
</a>
<a style="color:#FFFFFF" href="player-hd/listen.html" class="disc l4">
<div>LIVE</div>
</a>
<a style="color:#FFFFFF; font-size: 30px;" class="disc l5 toggle">
☰
</a>
</nav>
解决方案
只需简单地删除它:
setTimeout(function(){
nav.classList.toggle('open');
}, 800);
推荐阅读
- javascript - 如何在不使用模块的情况下将道具传递给孩子?
- java - SQL 比较表中的两个期间并获取销售结果
- vb.net - 使用 EPPlus 查找范围内的文本
- amazon-web-services - 批量 AWS S3 文件是否存在验证?
- javascript - 附加到无序列表时,无法在“节点”上执行“附加孩子”错误
- c++ - 特征库问题:未找到 split_test_helper.h
- graphql - 将 prisma 客户端与关系解析器一起使用
- latex - 如何将 .fig 文件添加到 Latex 文档中?
- flutter - Flutter 为什么不尊重容器宽度?
- c# - 在 .net 中搜索多个实体属性