• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Ocultar los elementos del submenú del U Theme en dispositivos móviles

Descubre en este tutorial para Genesis Framework cómo conseguir que los subelementos del menú se mantengan ocultos o plegados en pantallas pequeñas mediante código.

Una de las ventajas de ser suscriptor de Código Genesis es que puedes proponer futuros tutoriales. Por ejemplo, Carlos me preguntó:

Respecto al tutorial, en algunos temas de AsiThemes las subpáginas aparecen desplegadas en el menu responsive de tablet y móvil.

¿Cómo se podría hacer para que aparecieran ocultas y al darle a la página principal se mostraran? Vamos como el Genesis sample de siempre.

Efectivamente, la mayoría de las plantilla de Genesis creadas por AsiThemes muestran los subelementos del menú desplegados por defecto.

Menú del U Theme, muestra subelementos por defecto en dispositivos móviles.

¿Tú también prefieres que se oculten estos submenús en dispositivos móviles?

Este sería el resultado final:

¿Sí? Pues sigue leyendo. 😉 

Pasos para ocultar los subelementos del menú en el U Theme para dispositivos móviles

1. Modifica el archivo scripts.js

Introduce lo siguiente al fichero scripts.js, situado en la ruta /assets/js/ del U Theme:

Para ver este código y los otros 1837 snippets de esta web,
identifícate o suscríbete aquí.

Con este snippet agregas la clase .open al submenú cuando se hace clic sobre el ítem principal y añades una flecha al lado del ítem del menú que los contiene.

2. Cambia el fichero style.css

Añade el siguiente fragmento de código al final del style.css:

Para ver este código y los otros 1837 snippets de esta web,
identifícate o suscríbete aquí.

¡Ya lo tienes!

Con este bloque de código ocultas los subelementos hasta que se hace click en ellos y colocamos la flecha donde queremos.

Menú del U Theme ocultando los subelementos

Ahora cuando pulses el menú hamburguesa en dispositivos móviles no se mostrarán los elementos del submenú.

Solo se visualizarán cuando pulses sobre la flecha o el elemento «padre» de la que dependen.

Conclusiones

¿Prefieres ocultar los subelementos del menú en dispositivos móviles? Ahora ya sabes cómo conseguir que desaparezcan hasta que hagas clic sobre el apartado al que pertenecen. 

Aunque este tutorial está pensado para una plantilla concreta, puede servirte de guía para modificar otros child themes de Genesis Framework.

¿Prefieres que lo adapte a alguno de ellos en particular? Dímelo en los comentarios y prepararé un tutorial a medida.

Ventajas de ser suscriptor. 😉

Cabecera CSS Genesis Framework Javascript Menú U Theme

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes identificarte o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?