¿Cómo puedo hacer que mi barra de navegación sea la misma en mi html?

Con cada página nueva tengo que actualizar el panel de navegación. Lo que significa que voy de página en página copiando y pegando mi barra de navegación. Cuantas más páginas agregue, más difícil se vuelve. Ahora tengo barras de navegación consistentes. Entonces, lo que estoy buscando es una forma de hacer un archivo html que contenga solo la barra de navegación, luego incrústelo en mi código, como haría con CSS y JavaScript. De esta forma, si edito el archivo, todas las demás páginas se actualizan. Si utilizo la etiqueta iframe, podría haber muchos problemas, pero no conozco ninguna otra etiqueta que pueda hacer lo que necesito. ¿Entonces qué debo hacer? Hice algunas investigaciones, pero todo lo que puedo encontrar es la etiqueta iframe … ¿Qué debo hacer?

Si su página es estrictamente HTML + JavaScript, puede usar HTML DOM innerHTML Property. Aquí hay un ejemplo:

https://stackoverflow.com/questions/15445430/how-can-i-make-my-navi-bar-the-same-across-my-html/index.html

    
rest of web page body here

https://stackoverflow.com/questions/15445430/how-can-i-make-my-navi-bar-the-same-across-my-html/about.html

    
rest of web page body here

script.js

  document.getElementById("navMenu").innerHTML = ''; 

La línea importante aquí es la etiqueta de navegación, y todo lo que necesita hacer es agregar esta línea en otras páginas en este ejemplo https://stackoverflow.com/questions/15445430/how-can-i-make-my-navi-bar-the-same-across-my-html/about.html.

¡También recomiendo PHP o similar para lograr lo que necesitas!

Recomiendo usar PHP:

  

Sin embargo, si eso no es una opción, puede usar Server Side Includes :

Archivo en el mismo directorio:

  

Archivo en un directorio diferente:

  

Necesitará un servidor Linux / Apache (no Windows) para que esto funcione. También necesitarás usar la extensión de archivo .shtml .


Alternativamente, dado que desea mantener las extensiones .html , puede hacer que Apache “piense” que todos los archivos .html son en realidad .php :

Cree un archivo .htaccess en la raíz de su sitio web y agregue esta línea:

 AddType application/x-httpd-php .html .htm 

Si está ejecutando PHP como CGI (probablemente no sea el caso), debe escribir en su lugar:

 AddHandler application/x-httpd-php .html .htm 

(Tomado de esta respuesta )

Si su página es estrictamente HTML, simplemente tendrá que copiar y pegar. Hubiera sido mucho mejor si estuvieras usando PHP, entonces simplemente puedes hacer un include o require, pero como la situación es ahora, todo lo que necesitas es hacer una encoding HTML limpia para tu navegación. Sancione bien sus códigos, entonces será más fácil para usted copiar y buscar páginas en todas las páginas.

Si puede usar códigos PHP simples, lea esto: http://www.w3schools.com/php/php_includes.asp

Si desea utilizar PHP para lograr esto, puede hacer algo similar al código a continuación. Tendrás 2 archivos de “plantilla” y luego, cuantos archivos de “contenido” necesites.

  • header.php incluirá contenido en el encabezado (logotipo, menú de navegación, etc.)
  • footer.php incluirá contenido en el pie de página (navegación inferior, derechos de autor, descargos de responsabilidad, etc.)
  • content.php incluirá el contenido real que deseas mostrar. Puede tener un número infinito de páginas de “contenido”.

Tenga en cuenta que si bien estos archivos tienen extensiones .php , el código HTML todavía funciona perfectamente bien. Entonces puedes hacer algo como esto por cada content.php :

content.php

  
Your page content will go here

header.php

   
Header content such as nav bar here

footer.php

    

De esta forma, puede cambiar los contenidos de header.php y footer.php solo una vez, y los cambios se reflejarán en todas las páginas en las que haya incluido los archivos.

Si tiene más preguntas o desea que se explique algo de nuevo, no dude en publicar un comentario.

De hecho, si solo hace cosas de front-end como yo, usar load () con jQuery es más que suficiente. Justo como lo dijeron Skitty y fskirschbaum.

Pero me gustaría agregar algunos puntos,
1. basado en el comentario de @ Skitty, es importante cargar su navbar.html en el lado del servidor, como simplemente alojarlo en su sitio web github.io y referirse a él por su URL como

  $(document).ready(function() { $('#nav-container').load('https://berlinali.github.io/test%20header%20template/header.html #nav');} 

2. Si tiene un archivo css, simplemente colóquelo dentro de

Presioné mi código en github si necesita alguna referencia. ¡Espero eso ayude! https://github.com/BerlinaLI/berlinali.github.io/tree/master/test%20header%20template

Puede usar lenguajes de scripting del lado del servidor como php o ruby. O puede crear algún archivo de menú.json y crear un menú a partir de ese en javascript.

  1. Con el servidor, debe configurar el servidor o puede usar XAMPP para una configuración rápida.

  2. Crea header.html con todos tus enlaces de menú

  3. Inlude el archivo de menú usando línea (todos los archivos donde la use deben estar con la extensión .php o puede editar el archivo de configuración de php para la extensión .html)

PHP probablemente sea el mejor método en este caso, pero dado que parece que ya tienes todo configurado en HTML y JavaScript puros, podrías considerar usar jQuery para cargar un archivo externo en el DOM.

 jquery.load('header.html') 

Esto, por supuesto, tiene su propio conjunto de preocupaciones, pero puede controlar todo de manera efectiva desde un simple marco .js sin tener que usar las inclusiones de php y no requiere un iFrame.

Todavía es posible que desee abordar una alternativa para los navegadores sin JavaScript activado, por lo que solo sugiero que no conozca todos los detalles, y aún así sugeriría que php aún sería una mejor solución ya que permite que el servidor lo haga el trabajo pesado.

Lo descubrí por mi cuenta, puedes usar un archivo JavaScript y usar document.write y ponerlo donde quieras que vaya:

  

Aquí está mi archivo js:

 document.write("
"); document.write("

Navigation

"); document.write("
");

Si desea utilizar tanto comillas dobles como comillas simples dentro de la línea, tenga cuidado con eso, y creo que los signos tienen que estar entre comillas dobles. Aquí está mi código completo:

  ----/js/sidebar.js---- document.write("
"); document.write("

Navigation

"); document.write("
"); document.write(""); ----In place where you want code to go----

Probablemente no sea el más eficiente, y definitivamente recomendaría usar PHP como en las otras respuestas, pero esto funciona para mí y no necesita un .php después de cada url.

Simplemente use jQuery .load (). Es muy fácil de usar. Aquí hay un ejemplo

navbar.html

 
This is the navigation bar

https://stackoverflow.com/questions/15445430/how-can-i-make-my-navi-bar-the-same-across-my-html/index.html

    Home Page      

This is the homepage.

https://stackoverflow.com/questions/15445430/how-can-i-make-my-navi-bar-the-same-across-my-html/about.html

    About Page      

This is the about page.