1

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();
2
  • 1
    En StackOverflow en español utilizamos la lengua de Cervantes para preguntas, respuestas y comentarios. Por favor, publica en español. Un saludo.
    – jachguate
    Commented el 9 jun. 2021 a las 7:52
  • Probá usando las comillas estas en returnNav: --> ` <---
    – imili
    Commented el 10 jun. 2021 a las 19:06

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.