Como usar un iframe menú para todas las páginas

  • 0

Suele suceder que al crear una página web con varias páginas se nos vaya un enlace, que no corresponda a la página o simplemente añadir un nuevo link y cambiar página por página es uno de los problemas que nos aqueja a los que somos novatos.

Y bueno, la única solución es poner un iframe en la parte superior de la página que contendrán todos los enlaces relacionados a ella, así con ello solo cambiaremos una sola página (menú) y por default todas las páginas tendrán los mismos links.

1.- Crea la página del menú

Te recomiendo llamarla menuBAR.html si tienes CSS solo copia el DIV donde va el menú que por lo general viene así:

El DIV puede tener muchos nombres pero es el que llama el formato a la CSS, así que cópialo también.

Copia y pega el DIV en una página nueva en blanco y no olvides incluir el Link donde tienes el CSS en caso de que no lo tenga.

En las páginas borra el DIV y sustitúyelo por:

El iframe ya tiene el ancho al 100% eso quiere decir que tomara en automático el ancho de la página por lo que solo tendrás que cambiar el height que es lo alto, en cualquier caso, puedes modificar el tamaño.

2.- Inserta un rompe iframe

Una vez que ya tengas instalado el iframe, al darle clic en algún enlace, la página se abre dentro del iframe pero no te lleva a ella tal cual o mejor dicho no se muestra en la página, para eso, tienes que poner un JavaScript que rompa el iframe, es decir, que al direccionarte a la página esta salga del iframe y se muestre en toda la pantalla, pero evita poner este código en la página del menú para evitar que esta salga de su lugar.

NOTA:

Si tienes un enlace o quieres cambiar el contenido del iframe solo necesitas llamar al iframe con un enlace:

No hay comentarios: