Repetir menu en todas las paginas html
Bootstrap navbar cada página
Los módulos personalizados pueden tener tanto un menú simple como campos de menú. Debido a que los desarrolladores tienen más control sobre el código de salida, los módulos personalizados son generalmente el método preferido para la mayoría de los desarrolladores. Le permiten crear módulos de barra lateral, módulos de navegación de pie de página, módulos de navegación de cabecera, etc. para adaptarse a su flujo de trabajo y a sus necesidades de negocio o de diseño. Los campos de menú permiten al editor de contenidos elegir un menú de los menús de navegación global de la cuenta. El campo de menú simple les permite crear menús que no son reutilizables en otros lugares.
Para casos de uso de menús realmente complicados puede tener sentido utilizar un módulo con grupos de repetición o un HubDB para gestionar la estructura y la forma del menú. Dicho esto, ese método tiene el coste de una interfaz de usuario fácil para los editores de contenido. Para situaciones como esa puede tener sentido usar el menú o campos de menú simples en tándem con la función de menú, para que pueda proporcionar una estructura avanzada, funcionalidad, Y una buena experiencia de menú.
Como recordatorio amistoso: Una de las mejores prácticas para las cabeceras de los sitios, que a menudo contienen la larga navegación principal, es proporcionar un enlace «saltar al contenido». Esto ayuda a los usuarios que navegan con el teclado a saltarse los menús largos.
Varias páginas en un archivo html
Acabo de terminar de hacer mi página home/index.html. Para mantener la barra de navegación donde está, y que permanezca mientras los usuarios hacen clic a través de todas mis páginas. ¿Tengo que copiar y pegar el código de navegación en la parte superior de cada página? ¿O hay otra manera de hacerlo que se vea más limpio?
Esto es lo que me ayudó. Mi barra de navegación está en la etiqueta body. Todo el código de la barra de navegación está en el archivo nav.html (sin ninguna etiqueta html o body, sólo el código de la barra de navegación). En la página de destino, esto va en la etiqueta head:
A continuación, utilice el método $.get de jQuery para obtener el contenido de la página. Por ejemplo, digamos que has puesto todo el HTML de la barra de navegación en un archivo llamado navigation.html y has añadido una etiqueta placeholder (Como <div id=»nav-placeholder»>) en tu index.html, entonces usarías el siguiente código:
Navegación multipágina html
Perdón por esta pregunta en última instancia newb. Quiero crear un menú y no tener que repetir el código del menú en cada página web. He hecho esto con iframes en el pasado, pero sé que no son recomendables. Tengo un conocimiento bastante decente de HTML y CSS, pero siento que me falta algo grande aquí.
El uso de includes en PHP para lograr esto es simple y requiere muy poco conocimiento. Mucho más fácil y eficiente que hacerlo con JS. Además, no veo cómo XML sería de ayuda aquí a menos que lo lea con JS (en el que tendría el mismo problema mencionado anteriormente.)
No estoy muy seguro de las opciones que tienes aparte de un .php include. No estoy seguro de por qué evitarías PHP a menos que el servidor no lo soporte, ya que es muy simple hacer un include (realmente no necesitas saber PHP para hacer esto excepto por la declaración de inclusión).
Barra de navegación en todas las páginas
Este es uno de los principales problemas que resuelven cosas como React o Handlebars.js: cualquier código, especialmente cosas estructurales como una cabecera o un pie de página, puede escribirse una vez y reutilizarse fácilmente en todo el proyecto.
El principal problema es que, al menos en el ejemplo actual, el código del mensaje de bienvenida está mezclado con el resto del contenido de la página. Si quieres cambiar el mensaje de bienvenida más tarde, tendrás que cambiar el código en varios archivos.
Sin embargo, los elementos <template> pueden ser emparejados con un elemento <slot>, lo que le permite hacer cosas como cambiar el texto de los elementos dentro del <template>. Está un poco fuera del alcance de este tutorial, así que puedes leer más sobre los elementos <slot> en MDN.
Hay cuatro callbacks especiales del ciclo de vida de los elementos personalizados que podemos utilizar para añadir el markdown de la cabecera a la página: connectedCallback, attributeChangeCallback, disconnectedCallback y adoptedCallback.
El estilo del componente del pie de página anula el estilo de la cabecera, cambiando el color de los enlaces. Este es el comportamiento esperado para el CSS, pero sería bueno si el estilo de cada componente se limitara a ese componente y no afectara a otras cosas en la página.