1

quiero poner mi NavBar en todas mis paginas HTML, pero no encuentro la forma de integrarla, hay alguna manera? o tengo que copiar y pegar el código cada vez? intente por medio de Iframe, pero creo que no va a funcionar la superposicion de los elementos desplegables del SubMenu de la NavBar, ocupo ayuda, soy muy principiante, por lo que no he tocado nada de PHP y muy poco de JS. Adjunto el Codigo de la Nav bar, la cual ya tiene sus estilos CSS

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Escuderia Fenix</title>
  <link rel="stylesheet" href="/css/Barra.css">
</head>

<body>
  <header>
    <div class="menu">
      <div class="navbg">
        <a href="bienvenida.html">
          <img src="../image/Fenix_Logo.png" class="logo" alt="Logo">
        </a>
        <nav class="Baner-Principal">
          <ul class="Baner-Principal">
            <li>
              <a href="#">Nosotros</a>
              <ul>
                <li><a href="#">wadwq</a></li>
                <li><a href="#">dadsda</a></li>
                <li><a href="#">dsadad</a></li>
              </ul>
            </li>
            <li>
              <a href="#">Patrocinadores</a>
              <ul>
                <li><a href="#">etddgfg</a></li>
                <li><a href="#">rdgfd</a></li>
                <li><a href="#">grdgd</a></li>
              </ul>
            </li>
            <li>
              <a href="integrantes.html">Integrantes</a>
              <ul>
                <li><a href="#">sadd</a></li>
                <li><a href="#">gdrgf</a></li>
                <li><a href="#">bfdb4we</a></li>
              </ul>
            </li>
            <li>
              <a href="#">Contacto</a>
              <ul>
                <li><a href="#">gdfgr</a></li>
                <li><a href="#">y,iuh</a></li>
                <li><a href="#">jghrj5tr</a></li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </header>

</body>

</html>

2 respuestas 2

3

Puedes usar fragmentos de HTML de un archivo externo e incluirlos en el resto de páginas que quieras utilizando la etiqueta <object>, primero crea el archivo que contendrá el fragmento sin body ni head (el navbar en tu caso) con algun nombre como navbar-template.html por ejemplo, quedaria asi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="estilos.css">
  <title>Document</title>
</head>
<body>
  <header>
    <div class="menu">
      <div class="navbg">
        <a href="bienvenida.html">
          <img src="../image/Fenix_Logo.png" class="logo" alt="Logo">
        </a>
        <nav class="Baner-Principal">
          <ul class="Baner-Principal">
            <li>
              <a href="#">Nosotros</a>
              <ul>
                <li><a href="#">wadwq</a></li>
                <li><a href="#">dadsda</a></li>
                <li><a href="#">dsadad</a></li>
              </ul>
            </li>
            <li>
              <a href="#">Patrocinadores</a>
              <ul>
                <li><a href="#">etddgfg</a></li>
                <li><a href="#">rdgfd</a></li>
                <li><a href="#">grdgd</a></li>
              </ul>
            </li>
            <li>
              <a href="integrantes.html">Integrantes</a>
              <ul>
                <li><a href="#">sadd</a></li>
                <li><a href="#">gdrgf</a></li>
                <li><a href="#">bfdb4we</a></li>
              </ul>
            </li>
            <li>
              <a href="#">Contacto</a>
              <ul>
                <li><a href="#">gdfgr</a></li>
                <li><a href="#">y,iuh</a></li>
                <li><a href="#">jghrj5tr</a></li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
</body>
</html>

Luego, para incluir ese fragmento en tu página principal o en cualquier página que quieras haces lo siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <object data="navbar-template.html" 
          type="text/html" 
          style="height: 500px; width: 100%;">
  </object>
  <h1>Hello</h1>
  <h1>World</h1>
</body>
</html>

Coloque el navbar al principio del body porque asumí que estaba en esa posición pero tú puedes agregar otras etiquetas al principio o al final. Despues existen los motores de plantillas como Mustache.js pero no quise complicarte la vida. Documentacion de object. Asegurate de colocar bien la ruta del archivo en la propiedad 'data'.

EDIT: viendo los inconvenientes que presentaba mi solución al leer la respuesta de @Yussef, pude averiguar que para aplicar estilos al fragmento debemos utilizar si o si las etiquetas html, head y body al mismo. Edite mi respuesta para que funcionara aplicando estilos personalizados al navbar.

1

Usando Web Components, es posible crear un componente personalizado que te permita hacer lo que buscas. La diferencia de este Script con usar object, es que de esta manera se aplicará el CSS al contenido externo

1.- Copias este script y lo colocas junto con el resto de tus scripts

customElements.define('yus-html',
  class extends HTMLElement {
      constructor() {
          super();
      }
      connectedCallback() {
          fetch(this.getAttribute("src"))
              .then(r => r.text())
              .then(t => {
                  let parser = new DOMParser();
                  let html = parser.parseFromString(t, "text/html");
                  this.innerHTML = html.body.innerHTML;
              }).catch(e => console.error(e));

      }
});

2.- Creas tu menú u otros HTML que deseas repetir, solo lo interno (sin usar las etiquetas HTML, BODY y HEAD)

<header>
    <div class="menu">
      <div class="navbg">
        <a href="bienvenida.html">
          <img src="../image/Fenix_Logo.png" class="logo" alt="Logo">
        </a>
        <nav class="Baner-Principal">
         
          <!-- ETC !-->
        </nav>
      </div>
    </div>
  </header>

3.- Luego para usarlo solo debes hacer:

<body>
    <yus-html src="Menu.html"></yus-html>
    <div class="row">
        <yus-html src="OtroHtml.html"></yus-html>
    </div>

    <yus-html src="OtroOtroHtml.html"></yus-html>

</body>

(Puedes usarlo para distintos HTML, las veces que quieras)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.