3

Estoy creando una web, la cual tendrá muchas sub páginas y quiero incluir una NavBar en todas ellas, estoy trabajando con boostrap 5 y quiero saber si hay alguna forma de crear una única NavBar y insertarla en todas las páginas para no tener que actualizarlas 1 por una cada vez que hago un cambio.

No quiero utilizar PHP, quiero poder cargar mi NavBar solo utilizando JavaScript.

Dejo por aquí el código de mi NavBar:

<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ALCOHOLIMPIADAS</title>
    <link rel="shortcut icon" href="../img/icono.png">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  </head>
  <body>
    <!--MENU-->
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
      <div class="container-fluid">
        <a class="navbar-brand" href="../index.html">
          <img src="../img/logo.png" alt="Logo" width="70" height="70" class="d-inline-block"> ALCOHOLIMPIADAS </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="../index.html">INICIO</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="../#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> JUEGOS </a>
              <ul class="dropdown-menu">
                <li>
                  <a class="dropdown-item" href="../juegos_cartas.html">JUEGOS CON CARTAS</a>
                </li>
                <li>
                  <a class="dropdown-item" href="../juegos_nada.html">JUEGOS SIN NADA</a>
                </li>
                <li>
                  <a class="dropdown-item" href="../#">JUEGOS DE DADOS</a>
                </li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="../#">CONTACTO</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
      </body>
</html>

1 respuesta 1

3

el codigo para hacer esto no es demasiado complicado, en el head de tu archvio, en este caso pongamos que es index.html tienes que introdcir el siguente código:

<script>
    $(function() {
        $('#header').load('header.html');
    });
</script>

Esta funcion se encarga de cargar el archivo header.html dentro de tu ìndex.html (ten en cuenta poner la ruta correcta dentro de la función y el nombre correcto).

Crea un archivo llamado header.html en el mismo directorio donde esta tu index.html, si no esta en el mismo directorio recuerda modificar la ruta en la función de JavaScript. Dentro del archivo header.html introduce el código de tu header sin etiquetas html ni nada, solo el código del header, en este caso:

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="../index.html">
      <img src="../img/logo.png" alt="Logo" width="70" height="70" class="d-inline-block"> ALCOHOLIMPIADAS </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="../index.html">INICIO</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="../#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> JUEGOS </a>
          <ul class="dropdown-menu">
            <li>
              <a class="dropdown-item" href="../juegos_cartas.html">JUEGOS CON CARTAS</a>
            </li>
            <li>
              <a class="dropdown-item" href="../juegos_nada.html">JUEGOS SIN NADA</a>
            </li>
            <li>
              <a class="dropdown-item" href="../#">JUEGOS DE DADOS</a>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="../#">CONTACTO</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Ahora, donde quieras cargar el header en este caso en el index.html tienes que crear un div con el id="header", te muestro como quedaría tu página:

<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ALCOHOLIMPIADAS</title>
    <link rel="shortcut icon" href="../img/icono.png">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <script>
        $(function() {
            $('#header').load('header.html');
        });
    </script>
  </head>
  <body>
    <!--MENU-->
  <div id="header"></div>  
  </body>
</html>

Este código funcionará independientemente de si se esta usando BootStrap o no, pero ten en cuenta que solo funcionará cuando tu web esté colgada en un servidor, ya que por seguridad, los navegadores como Google Chrome o Firefox bloquean la carga de archivos locales.

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.