Problema con menu móvil

[fer86]

Buenos días,

Estoy diseñando un menú "responsive" para pantallas de dispositivos móviles con Jquery. El problema es que el número de ítems de cada uno de los menus desplegables es elevado, por lo que no cabe en una pantalla de móvil. Al intentar desplazar el menú hacia abajo para ver todos los ítems (bien sea con el pulgar en dispositivos móviles o con la rueda del ratón en pc), el menú se queda fijo y lo que se desplaza es el fondo de la pantalla, por lo que no puedo ver parte del menú

Os dejo un enlace de jsfiddle con el problema (la imagen del menú de arriba a la izquierda cumple su función para desplegar y cerrar el menu, pero no sabía cómo cargarla, os pido disculpas):[JSFIDDLE="jsfiddle.net/t87cfLwo/5/"][/JSFIDDLE]

Cualquier aporte será bienvenido.

Muchas gracias.

[enlinea777]

el problema es el css posisionando el menu como fix no dejas que se mueva
aqui tu solucion:
https://jsfiddle.net/358vL2gb/

[fer86]

Gracias por el aporte, he cambiado position a "absolute" en "menumob" (que es el menu principal), y en subm1, 2 y 3 (que son los correspondientes submenus.

El problema es que ahora, cuando hago clic en la imágen para desplegar el menú, éste aparece en la parte de arriba del documento. (la imagen que despliega el menu esta en position:fixed para que este siempre visible)

Además cuando el usuario hace scroll con el menu desplegado, el menu puede desaparecer de la pantalla:

[JSFIDDLE="https://jsfiddle.net/358vL2gb/1/"][/JSFIDDLE]

PD: siento lo de los enlaces, no se que puedo estar haciendo mal y la wiki del foro parece fuera de servicio.

[enlinea777]

una forma facil es agregar un href al principio de la pagina
https://jsfiddle.net/358vL2gb/1/
lo otro seria usar javascript

[fer86]

Gracias Enlinea, voy a hacer un par de pruebas..:

<a href="https://jsfiddle.net/358vL2gb/1/" target="_blank">https://jsfiddle.net/358vL2gb/1/</a>

<br>

<a href="https://jsfiddle.net/358vL2gb/1/">https://jsfiddle.net/358vL2gb/1/</a>

href=https://jsfiddle.net/358vL2gb/1/

Con respecto al menu, entonces no me quedará otra que usar un complejo algoritmo en javascript/jquery para detectar los pixeles de scroll y demás, verdad?

Edito: no parece que me funcione lo de los links... abajo del todo me dice "Código HTML está Desactivado", no se si tendrá algo que ver.

[Alexis88]

No hace falta que uses un "complejo algoritmo", basta con que el menú cambie su forma en pantallas de dimensiones cortas. Por ejemplo, mira el menú de la página de la RAE; míralo en una desktop y luego en un móvil o si lo ves en una desktop o notebook, restaura la ventana del navegador y hazla pequeña para que veas la forma que adopta el menú.

Es una buena opción que creo que puedes considerar.

Saludos

[fer86]

Gracias Alexis,

Está muy bien el menu de la RAE, en realidad yo estoy intentando algo muy parecido, solo que me gustaría que se pudiera desplegar el menú desde cualquier parte de la página (por eso la imagen del menu esta en "position:fixed").

Cuando el número de items de cada submenú es pequeño, no hay problema, ya que caben en la pantalla y puedo usar esto: www.jsfiddle.net/t87cfLwo/5/, pero cuando el número de items es grande, no caben en pantalla. Enlinea me ha sugerido usar "position:absolute" para permitir el scroll de los menus: www.jsfiddle.net/358vL2gb/1/ y es lo que estoy usando ahora, pero los menus se van "de paseo" al hacer scroll y demás problemas derivados...

[Alexis88]

Quizá si usas elementos <select> para agrupar las opciones del menú y otro para las opciones del submenú, podría mostrarse todo sin necesidad de hacer scroll. La idea sería que cada <select> de cada submenú esté oculto y solo muestras al que corresponde con la opción seleccionada en el <select> del menú principal.

Saludos

[fer86]

No conocía esa etiqueta hasta ahora, pero si te he entendido bien creo tampoco me sirve, ya que hay submenús que por si solos no caben en pantalla y no me queda otra que hacer scroll para visualizarlos enteros. Con lo que estoy intentando ahora sólo aparece el submenú que esta seleccionado en cada momento. Alguna otra sugerencia?

[Alexis88]

Si te fijas en el cuadro en el que se escriben las respuestas de este foro (más abajo), verás que hay un rectángulo con el texto "Highlight" y un triángulo invertido; ese es un <select>. Si das un clic sobre él, verás que se desplegará un listado con varias opciones. Es lo que podrías hacer; tener un <select> con las opciones principales y N <select> con las opciones de los submenús de cada opción principal.

Algo así:

Código HTML:

<!-- Menú principal -->
<select>
    <option>Opción 1</option>
    <option>Opción 2</option>
    <option>Opción 3</option>
    <option>Opción N</option>
</select>
 
<!-- Submenús -->
<select>
    <option>Opción 1 del submenú de la opción 1</option>
    <option>Opción 2 del submenú de la opción 1</option>
    <option>Opción 3 del submenú de la opción 1</option>
    <option>Opción N del submenú de la opción 1</option>
</select>
 
<select>
    <option>Opción 1 del submenú de la opción 2</option>
    <option>Opción 2 del submenú de la opción 2</option>
    <option>Opción 3 del submenú de la opción 2</option>
    <option>Opción N del submenú de la opción 2</option>
</select>
 
<select>
    <option>Opción 1 del submenú de la opción 3</option>
    <option>Opción 2 del submenú de la opción 3</option>
    <option>Opción 3 del submenú de la opción 3</option>
    <option>Opción N del submenú de la opción 3</option>
</select>
 
<select>
    <option>Opción 1 del submenú de la opción N</option>
    <option>Opción 2 del submenú de la opción N</option>
    <option>Opción 3 del submenú de la opción N</option>
    <option>Opción N del submenú de la opción N</option>
</select>
 

La idea sería que los submenús estén ocultos y mediante el evento change en el menú principal, detectes la opción elegida y según sea la opción que se haya seleccionado, muestras el submenú que le corresponda.

Incluso si hubieran submenús de los submenús, al final, solo se mostrarían dos, tres o N <select> representando a cada submenú.

La particularidad de usar un <select> es que, si te queda poco espacio por debajo de él, las opciones se despliegan hacia arriba y viceversa.

Saludos

[fer86]

Muchas gracias Alexis,

he hecho una prueba rápida y me convence tu sistema, voy a investigar un poco más eso del evento change

Un saludo ;)

[enlinea777]

Revise el tema detenidamente.

esta es la solucion

https://jsfiddle.net/t87cfLwo/5/

con respecto a complejos algoridmos.
yo solo usaria javascript para darle un alto maximo a los submenu con el problema

en el ejemplo esta ok todo.

Saludos

[fer86]

Perdona Enlinea me parece que te equivocaste de enlace. Me cito a mi mismo: "Os dejo un enlace de jsfiddle con el problema (la imagen del menú de arriba a la izquierda cumple su función para desplegar y cerrar el menu, pero no sabía cómo cargarla, os pido disculpas):[JSFIDDLE="jsfiddle.net/t87cfLwo/5/"][/JSFIDDLE]"

Es el mismo enlace XD

[enlinea777]

Iniciado por fer86

Perdona Enlinea me parece que te equivocaste de enlace. Me cito a mi mismo: "Os dejo un enlace de jsfiddle con el problema (la imagen del menú de arriba a la izquierda cumple su función para desplegar y cerrar el menu, pero no sabía cómo cargarla, os pido disculpas):[JSFIDDLE="jsfiddle.net/t87cfLwo/5/"][/JSFIDDLE]"

Es el mismo enlace XD

Perdon, lo havia echo sobre tu base pero no lo actualice.

https://jsfiddle.net/enlinea777/t87cfLwo/8/

espero te sirva

[fer86]

Error técnico...gracias tio!