¿Cómo haría una versión ‘expandida’ de una página web usando HTML, CSS y jQuery?

Para obtener efectivamente el efecto que desea, necesitará comprender fundamentalmente cómo funcionan juntos JavaScript / jQuery, HTML y CSS. Específicamente, probablemente debería pensar en su página como una serie de secciones que necesitará estructurar con HTML, diseñar y animar con CSS, y luego mostrar / ocultar / animar con jQuery. Tener una base sólida en CSS y JavaScript vainilla es probablemente el lugar para comenzar, así que si eres nuevo en cualquiera de ellos, comenzaría a hacer algunos tutoriales allí.

Para su pregunta específica, dividiría la página en 4 partes:

• Encabezamiento
• Menú de navegación izquierdo
• Menú expandido
• Área de contenido

Como mencioné antes, necesitará estructurar estos elementos y diseñarlos individualmente para obtener el efecto que desea. A continuación hay un par de formas en que agregaría oyentes y clases de jQuery para ayudarlo a encaminarse correctamente.

// Escuche el clic en el elemento de la pestaña izquierda para expandir la navegación a // pantalla completa. En un segundo clic del mismo botón, debería cerrar

$ (‘# BUTTON-ID’). On (‘click’, function () {
$ (‘. nav. pantalla completa) .toggle (‘ lento ‘, función () {
// comprueba si se muestra la navegación a pantalla completa
if (display === true) {
// si se muestra, deslice el navegador izquierdo hacia la parte superior agregando una clase a
// estilo
$ (‘. left-nav’). addClass (‘nav-move-to-top’);
} más {
$ (‘. left-nav’). removeClass (‘nav-move-to-top’);
}
});
}

Podría suavizar las cosas con animaciones, pero eso se está volviendo un poco más avanzado. Tampoco he probado esto, pero espero que te lleve por el camino correcto sobre cómo abordar el problema.

Para leer más, consulte los documentos de jQuery: jQuery API Documentation

Estoy de acuerdo con la publicación de Al Klein y todo lo que habla en ella. Después / mientras estás aprendiendo y refinando tus habilidades de programación, echaré un vistazo a las bibliotecas y los marcos. Ayudan a llevar sus páginas al siguiente nivel en términos de diseño y capacidad de respuesta. En el futuro, puede desviarse de estos, ya que le gustaría ser más personalizado, pero hasta entonces los usaría como excelentes ruedas de entrenamiento para su viaje de desarrollo web.

Algunos de mis favoritos son Bootstrap y Materialise.

Hay muchos tutoriales de YouTube que muestran cómo usar e implementar estos marcos. Además, lea la documentación en sus sitios web para obtener ayuda muy detallada.

Muchas de estas bibliotecas ya tienen lo que desea construir, solo necesita aprender cómo implementarlo.

Primero, deshazte del iFrame: es 2017.

Segundo, aprende programación.

Tercero, aprende JavaScript. (Conocer jQuery sin saber JavaScript es como conocer el alfabeto latino pero no conocer ningún idioma).

Cuarto: reescribe la página.

(Este no es un proyecto de 1 fin de semana, solo aprender programación [resolución de problemas] podría llevarle 6 meses de estudio a tiempo completo).