Навбар в фрейме

Question

Я пытаюсь настроить локальный веб-сайт с верхней панелью навигации.Поскольку сайт будет состоять из нескольких страниц, а параметры панели навигации могут часто меняться, я подумал, что смогу использовать SSI или что-то подобное, чтобы иметь ссылки на все страницы.Я спросил об этом здесь: Как имитировать SSI для локального сайта

Там мне предложили использовать iframe, так что я сейчас пытаюсь.Однако когда меню выпадает, оно останавливается в нижней части фрейма.Есть ли способ, чтобы div меню выдвигался из iframe?

Answer 1

1. Добавить <div class="nav"></div>
2. Добавить <script src="nav.js"></script>
3. использовать что-то вроде этого:

---

var navDiv = document.getElementById("nav");
if (navDiv) {
  var active = "/page3"; // location.pathname
  var navHtml = `
    <ul>
      <li class="${active=="/home"?"active":""}">Home</li>
      <li class="${active=="/about"?"active":""}">About</li>
      <li class="${active=="/page1"?"active":""}">Page1</li>
      <li class="${active=="/page2"?"active":""}">Page2</li>
      <li class="${active=="/page3"?"active":""}">Page3</li>
      <li class="${active=="/page4"?"active":""}">Page4</li>
      <li class="${active=="/page5"?"active":""}">Page5</li>
    </ul>`;
  navDiv.innerHTML = navHtml;
  //  document.querySelector(".active").scrollIntoView();

  var el = document.querySelector(".active")
  navDiv.scroll({
    top: el.offsetTop - 10,
    behavior: 'smooth'
  });
}

.active {
  color: red
}

#nav {
  overflow: auto;
  height: 50px;
  width: 100px;
  border: 1px solid black;
}

<div id="nav"></div>