Los menus desplegables se complican

  • Autor Autor ultracobra
  • Fecha de inicio Fecha de inicio
ultracobra

ultracobra

Ni
Verificado por Whatsapp
Diseñé un nav menu de sitio web que consta de submenus desplegable, los mostraré en los pantallazos.

El caso es que, en web funciona bien, se basa en enlaces ancla que saltan a otro segmento del home.

Pero en movil, además de fallar el menu-hamburguesa, también me falla el despliegue de los submenus, por lo que este menu no es suficientemente funcional.

No tengo suficiente experiencia con esos menus para saber que esn movil depronto sin mouse no puede desplegarde de ese modo, pero espero que la experiencia de alguien me aclare esto...

La vista izquierda es la vista en web con submenus desplegados correctamente, la vista derecha es el aspecto en versión móvil con problemas en ham-menu y despliegue correcto de submenús...
 

Adjuntos

  • chat_gpt4-resultados-vs-bing_chat.webp
    chat_gpt4-resultados-vs-bing_chat.webp
    124,1 KB · Visitas: 25
Es posible que la falta de funcionalidad en el menú hamburguesa y en los submenús en móvil se deba a algún problema de código en el diseño del nav menu.

En cuanto al desplegado de submenús en móvil, es cierto que el hecho de no contar con un mouse puede hacer que sea más difícil para el usuario acceder a ellos. Una posible solución sería crear un menú desplegable diferente para móvil que se adapte a la navegación táctil, por ejemplo, utilizando gestos y animaciones que permitan mostrar los submenús de una manera más intuitiva.

Sería útil ver el código que utilizaste para poder brindarte soluciones más específicas.
 
El nav menu como está ha mejorado un poco. En web funciona bien según fue diseñado, pero en mobile, se alcanza a contraer, a desplegarse los submenues, lo que es un avance respecto al anterior menu.

Pero lo que no pasa es que al pulsar un submenu, salte el enlace al ancla de la table-board, com opasa en web.

Alguien sabe cómo resolverlo? Un indicio o idea...

Si quieren checar el código está en mi github.com.
 

Adjuntos

  • mejorando nav.webp
    mejorando nav.webp
    128,9 KB · Visitas: 16
Yo lo que veo asi nomas de 'pasada' en el firefox... en tu link de github:
tienes un <nav> y dentro un <boton> y un <ul> (menu)
(imagen adjunta 1)
1.jpg
<nav>
<button></button>
<ul class="main-menu"></ul>
</nav>

<nav> no tiene width por que toma la medida de <body> 800px, tiene margin: 0 auto entonces sera un 'rectangulo' de 800px centrado.
pero con justify-content: space-between; ...<boton> se va a un lado y <ul> para el otro lado.
<boton> no se ve el icono
<ul> tiene width: 100%; entonces medira lo mismo que <nav> y <body> ... 800px

Cuando se reduce o detecta menos de 768px con @Media screen and (min-width: 769px) 'aplica' un display: flex; a .main-menu que es <ul>
(no cambia en nada)
Pero ...
Cuando se reduce o detecta menos de 767px con @Media only screen and (max-width: 768px)
que es lo que hace?
con position: absolute; y top: 40px; left: 0; ... se 'sale' de posicion 'deja' a <nav> arriba y toma 40px de distancia de arriba y se supone que con left se alinea a la izquierda pero como tiene width: 100% pues abarca todo y no se nota
(imagen adjunta 2)
2.jpg

En resumen
Con ese link de github, visto en firefox: <ul> a los 767px 'toma' con position: absolute la izquierda y 40px de distancia de arriba y 100% de ancho y ... esto lo que hace
 
Última edición:
Gracias @Puko por tu explicación, no lo resolví del todo porque sigue alineado a la derecha el nav pero así me gusta. Logré resolverle problemas de navegabilidad tanto en movil como en web. Si algo le echas una mirada a mi página que está mejorando...
 
Atrás
Arriba