Estoy tratando de crear un diseño receptivo para un sitio web de práctica. La situación es que la imagen del ícono de menú a continuación solo se muestra cuando el ancho es inferior a 701 px. Así que lo hace bien. Pero el problema es que, cuando se muestra la imagen del ícono del menú, el ancho de la pantalla es inferior a 701 px, hago clic en la imagen y no sucede nada. El atributo onclick "togglemenu()" no parece funcionar. ¿Puede alguien ayudar, por favor? Este es un sitio en vivo:
https://moortje.github.io/HTML-CSS-Proyecto-Bro-Code/
La lista de menús y el ícono de menú en cuestión están en la parte inferior.
Aquí hay un fragmento de HTML.
<ul id="menuList"> <li><a href="">CSI</a></li> <li><a href="">CHP</a></li> <li><a href="">HCSS</a></li> <li><a href="">JS</a></li> </ul> <img src="moortje2.png" class="menu-icon" onclick="togglemenu()"> <script type="text/javascript"> var menuList = document.getElementById("menuList"); menuList.style.maxHeight = "0px"; function togglemenu(){ if (menuList.style.maxHeight == "0px") { menuList.style.maxHeight = "130px"; } else{ menuList.style.maxHeight = "0px"; } } </script>Aquí hay un fragmento de CSS.
.menu-icon{ width: 25px; cursor: pointer; display: none ; } @media only screen and (max-width: 700px){ .menu-icon{ display: block; } #menuList{ overflow: hidden; transition: 0.5s; } }El problema es que está configurando max-height y max-width
Cambiar esas propiedades no cambia el tamaño del elemento, solo cuáles son sus límites máximos.
Use width y height en su lugar.
Aparece en la parte superior de la página debido a la position: absolute
Bueno, revisé el código y descubrí que la función alternar menú funciona correctamente e incluso abre el menú. Pero le ha dado una posición absoluta a la etiqueta ul y cuando hace clic en alternar imagen. Abre el menú pero en la parte superior de la página.
Así que haga clic en la imagen y desplácese hacia arriba y verá su menú. Solo tiene que ajustar su posición para abrirlo debajo del botón/imagen de alternar menú.