0
199
Vistas¿Cómo eliminar el elemento de navegación en el cambio de tamaño de la ventana?
Puedo hacer que el objetivo desaparezca fácilmente, pero que el objetivo aparezca en la parte desplegable es complicado. He usado window.onresize y window.onload con las siguientes condiciones
if (window.innerWidth < 1190 && window.innerWidth > 1188) { var dt = document.createElement("dt"); dt.innerHTML = 'Target'; dt.className = '.target' dl.prepend(dt); } if (window.innerWidth > 1189 && window.innerWidth < 1191) { console.log('done') dt?.remove() }
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Si está de acuerdo con el uso de CSS para esto, entonces una manera realmente fácil de hacerlo sería usar consultas de medios.
@media only screen and (min-width: 1189px) and (max-width: 1191px) { .target { display: none; } }
·
Juan Pablo Isaza
Denunciar
0
Tal vez puedas crear objetivos estáticos y administrar quién se ocultará usando clases:
<nav> <ul> <li> Home </li> <li> Item </li> <li id="target-main">Target</li> <li class="nav-more-container">More <ul class="nav-more-list"> <li id="target-more">Target</li> <li>Item</li> <li>Item 2</li> </ul> </li> </ul> </nav> .hidden { display: none; } window.addEventListener("resize", () => { const { innerWidth } = window; const targetMain = document.getElementById("target-main"); const targetMore = document.getElementById("target-more"); if (innerWidth < 1190) { targetMain.setAttribute("class", "hidden"); targetMore.setAttribute("class", ""); } else { targetMain.setAttribute("class", ""); targetMore.setAttribute("class", "hidden"); } })
·
Juan Pablo Isaza
Denunciar
Responde la pregunta