Hello everyone I try to add a new class 'visible' to existing class 'menu' when the page is ready and all elements are loaded.
This is the code that I use.
.point {
position: absolute;
top: 50%;
left: 50%;
}
.menu ul {
background: rgb(255, 255, 255);
height: 0px;
opacity: 0;
position: absolute;
transition: .5s ease-in-out;
transition-delay: 0.2s;
}
.menu li:hover ul {
width: 300px;
height: 200px;
top: 30px;
left: 30px;
opacity: 1;
}
.menu li {
list-style-type: none;
}
.menu ul li a {
list-style-type: none;
text-decoration: none;
text-align: left;
color: rgb(66, 66, 66);
}
.menu ul li h1 {
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
text-decoration: none;
text-align: left;
}
.point div {
position: absolute;
width: 60px;
height: 60px;
background: #999;
z-index: 1;
cursor: grab;
}
.point:hover div {
background: #000;
position: absolute;
width: 60px;
height: 60px;
z-index: 2;
cursor: grab;
}
nav.menu {
visibility: hidden;
}
nav.menu.visible {
visibility: visible;
}<body>
<canvas class="webgl"></canvas>
<div class="loading-bar"></div>
<nav class="menu">
<li>
<div class="point point-0">
<div class="point"></div>
<ul>
<li>
<h1 href="#">num</h1>
</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
</li>
</nav>
</body>https://jsfiddle.net/pect25L3/
I tryed
window.onload = function() {
document.getElementById('menu').className = 'visible';
};
But nothing happens. Where can be my mistake?
Thank you.
The problem is '.menu' is a class in your HTML and you are using 'getElementById' in your JS.
your trying to get class='menu' with getById. change class to id
window.onload = function() {
document.getElementById('menu').className = 'visible';
};.point {
position: absolute;
top: 50%;
left: 50%;
}
.menu ul {
background: rgb(255, 255, 255);
height: 0px;
opacity: 0;
position: absolute;
transition: .5s ease-in-out;
transition-delay: 0.2s;
}
.menu li:hover ul {
width: 300px;
height: 200px;
top: 30px;
left: 30px;
opacity: 1;
}
.menu li {
list-style-type: none;
}
.menu ul li a {
list-style-type: none;
text-decoration: none;
text-align: left;
color: rgb(66, 66, 66);
}
.menu ul li h1 {
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
text-decoration: none;
text-align: left;
}
.point div {
position: absolute;
width: 60px;
height: 60px;
background: #999;
z-index: 1;
cursor: grab;
}
.point:hover div {
background: #000;
position: absolute;
width: 60px;
height: 60px;
z-index: 2;
cursor: grab;
}
nav.menu {
visibility: hidden;
}
nav.menu.visible {
visibility: visible;
}<body>
<canvas class="webgl"></canvas>
<div class="loading-bar"></div>
<nav id="menu">
<li>
<div class="point point-0">
<div class="point"></div>
<ul>
<li>
<h1 href="#">num</h1>
</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
</li>
</nav>
<script>document.getElementById('menu').className = 'visible';</script>
</body>first you are trying to use an id selector for a class selector, this is a working code
const visibleMenu = () =>{
const menu = document.querySelector('.menu');
menu.classList.add('visible')
};
window.onload = visibleMenu()