Preferiría una forma estrictamente JavaScript de hacer esto si es posible. Realmente no quiero introducir un marco de JavaScript en mi proyecto.
Layout: ./index.html ./about.html ./crew.html ./flights.html ./events.htmlQuiero que cada página tenga la misma barra de navegación para que no tenga que repetirme y corregir cada página cada vez que cambie el orden de los enlaces.
Aquí está mi barra de navegación de ejemplo:
<nav class="navbar navbar-expand-xl navbar-light"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#toggleMobileMenu" aria-controls="toggleMobileMenu" aria-expanded="true" aria-label="Toggle Navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse show" id="toggleMobileMenu"> <ul class="navbar-nav mx-auto"> <li class="nav-item text-center"> <a class="nav-link" href="index.html">Home</a> </li> <li class="nav-item text-center"> <a class="nav-link" href="about.html">About</a> </li> <li class="nav-item text-center"> <a class="nav-link" href="crew.html">Crew</a> </li> <li class="nav-item text-center"> <a class="nav-link" href="flights.html">Flights</a> </li> <li class="nav-item text-center"> <a class="nav-link" href="events.html">Events</a> </li> </ul> </div> </nav>Según el tipo de soporte de navegador que necesite, puede usar una plantilla literal (marcas de retroceso) para definir su navegación. Luego use insertAdjacentHTML para colocarlo donde lo necesite en todas sus páginas html. Si su página es bastante simple, simplemente puede insertar la navegación después de comenzar en la etiqueta del cuerpo.
const navigation = ` <nav class="navbar navbar-expand-xl navbar-light"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#toggleMobileMenu" aria-controls="toggleMobileMenu" aria-expanded="true" aria-label="Toggle Navigation" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse show" id="toggleMobileMenu"> <ul class="navbar-nav mx-auto"> <li class="nav-item text-center"> <a class="nav-link" href="index.html">Home</a> </li> <li class="nav-item text-center"> <a class="nav-link" href="about.html">About</a> </li> <li class="nav-item text-center"> <a class="nav-link" href="crew.html">Crew</a> </li> <li class="nav-item text-center"> <a class="nav-link" href="flights.html">Flights</a> </li> <li class="nav-item text-center"> <a class="nav-link" href="events.html">Events</a> </li> </ul> </div> </nav> ` document.getElementById("nav-container").insertAdjacentHTML('afterbegin', navigation); <div id="nav-container"></div>