Descubre en este tutorial para Genesis Framework cómo conseguir que el S Theme muestre un menú lateral en pantallas pequeñas mediante código.
El S Theme de AsiThemes resulta muy atractivo para presentar el porfolio.
Por defecto, exhibe el menú tradicional cuando se visualiza desde ordenadores (pantallas de más de 990px de ancho) y el menú de hamburguesa en dispositivos más pequeños.
A raíz del tutorial en el que aprendiste a fijar siempre el menú de hamburguesa en el S Theme, Carlos, uno de nuestros suscriptores, me preguntó:
Genial el tutorial! ¿Se podría hacer un tutorial con el menú saliendo del lateral, en lugar de pantalla completa?
Sería algo algo como el tema Mai Lifestyle Pro pero que aparezca desde el lado izquierdo (si se puede) y solamente en responsive.
Dicho y hecho. 😉
¿Tú también quieres adaptar el S Theme para que, en dispositivos móviles, el menú aparezca en el lateral izquierdo al pinchar en la hamburguesa?
Lo vas a entender mejor con un ejemplo de resultado final:
¿Sí? Pues sigue leyendo. 😉
Pasos para introducir un menú lateral en el S Theme solo en dispositivos móviles
1. Modifica el archivo scripts.js
Sustituye en el fichero scripts.js, situado en la ruta /assets/js/ del S Theme:
Para ver este código y los otros 1869 snippets de esta web,
identifícate o suscríbete aquí.
Con este snippet agregas la clase .open tanto al contenedor principal (site-inner) como al pie de página (site-footer), cuando se hace clic en el botón del menú.
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 1869 snippets de esta web,
identifícate o suscríbete aquí.
¡Ya lo tienes!
Ahora cuando pulses el botón de menú en dispositivos móviles, este se abrirá desde la parte izquierda desplazando el resto del contenido en la página hacia la derecha.
Conclusiones
¿Te gusta el modo en el que se muestra el menú de Mai Lifestyle Pro en pantallas pequeñas? Ahora ya sabes cómo conseguir ese efecto de menú lateral también en el S Theme solo para dispositivos móviles.
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. 😉
