Estoy trabajando en un sitio web con diferentes páginas. Me gustaría usar la misma navbar de un navbar.js para no tener que copiarla en cada página. La navbar actual usa la función showsubMenu() para que se desplega el menu. Mis intentos han devuelto errores directamente en el navbar.js .
Ejemplo de página en cuál se encuentra la navbar :
<header id="navbar" class="header">
<a href="#" class="header__logo__mobile stay-mobile"><img id="nav-img" src="../../assets/img/logo-header.png" alt="james and rita logo"></a>
<a href="#"><button class="button" id="nav-mobile-button"><p class="button-text">BOOK A DEMO</p></button></a>
<i style="color: white" class='bx bx-menu header__toggle' id="header-toggle"></i>
<nav class="nav" id="nav-menu">
<div class="nav__content bd-grid">
<div class="nav__menu">
<ul class="nav__list">
<li class="nav__item dropdown">
<a href="#" class="nav__link dropdown__link" onmouseover=showsubMenu()>Solutions <i style="color: white !important" class='bx bx-chevron-down dropdown__icon dropdown__link'></i></a>
...
</li>
<li class="nav__item"><a href="#"><button class="button" id="nav-button"><p class="button-text">BOOK A DEMO</p></button></a></li>
</ul>
</div>
</div>
</nav>
</header>
Fichero donde se encuentra la funcion que llamo en la navbar (con el desplegable)
const showMenu = (toggleId, navId)=>{
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId)
if(toggle && nav){
toggle.addEventListener('click', ()=>{
nav.classList.toggle('show')
toggle.classList.toggle('bx-x')
})
}
}
showMenu('header-toggle','nav-menu')
const navLink = document.querySelectorAll('.nav__link');
...
function showsubMenuMobile() {
...
}
function showsubMenu() {
showsubMenuMobile()
var x = document.getElementById("subnav");
if (x.style.display === "grid") {
x.style.display = "none";
} else {
x.style.display = "grid";
x.style.position = "fixed";
}
}
ejemplo de intento para devolver la navbar en un fichero js:
const englishNavContainer = document.getElementById('#navbar');
function returnNav() {
return
"<a href='#' class='header__logo__mobile stay-mobile'><img id='nav-img' src='../../assets/img/logo-header.png' alt='james and rita logo'></a>
<a href='#'><button class='button' id='nav-mobile-button'><p class='button-text'>BOOK A DEMO</p></button></a>
<i style='color: white' class='bx bx-menu header__toggle' id='header-toggle'></i>
<nav class='nav' id='nav-menu'>
<div class='nav__content bd-grid'>
<div class='nav__menu'>
<ul class='nav__list'>
<li class='nav__item dropdown'>
<a href='#' class='nav__link dropdown__link' onmouseover=showsubMenu()>Solutions <i style='color: white !important' class='bx bx-chevron-down dropdown__icon dropdown__link'></i></a>
...
</li>
<li class='nav__item'><a href='#'><button class='button' id='nav-button'><p class='button-text'>BOOK A DEMO</p></button></a></li>
</ul>
</div>
</div>
</nav>";
}
container.innerHTML = returnNav();