Hola a todos, trato de agregar una nueva clase 'visible' al 'menú' de clase existente cuando la página está lista y todos los elementos están cargados.
Este es el código que yo uso.
.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/
lo intenté
window.onload = function() { document.getElementById('menu').className = 'visible'; };Pero nada pasa. ¿Dónde puede estar mi error?
Gracias.
El problema es que '.menu' es una clase en su HTML y está usando 'getElementById' en su JS.
estás tratando de obtener class='menu' con getById. cambiar clase a 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>primero está tratando de usar un selector de identificación para un selector de clase, este es un código de trabajo
const visibleMenu = () =>{ const menu = document.querySelector('.menu'); menu.classList.add('visible') }; window.onload = visibleMenu()