Navbar in an iframe

Question

I'm trying to set up a local-only website with a top navbar. As the site will be multiple pages and the navbar options can change frequently, I thought I'd be able to use SSI or something similar to have all the pages reference. I asked about that here: How to mimic SSI for a local site

It was suggested there that I use an iframe, so that's what I'm attempting now. However, when the menu drops down, it stops at the bottom of the iframe. Is there a way for the menu divs to distend out of the iframe?

No. When you say local, you mean from hard-disk/file system? — mplungjan, Oct 19 '18 at 13:18
You have lots of options, one of the best/easiest would be to set up a local PHP environment and split your header/footer files up. Alternatively, see this thread: https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file — Alexander Wigmore, Oct 19 '18 at 13:19
@AlexanderWigmore I'm not able to set up a PHP environment. There's no real server environment set up for this. — Robby, Oct 19 '18 at 13:22
Then i suggest you include the navbar as a js file that updates the innerHTML of a div with scrollbars like this in the link posted above: https://stackoverflow.com/a/15250208/295783 — mplungjan, Oct 19 '18 at 13:24
I actually like the jQuery answer in the thread @AlexanderWigmore linked to. That seems to do the trick. — Robby, Oct 19 '18 at 13:35
@Robby - that does not necessarily work in all browsers - Chrome for example does not like to AJAX from file system — mplungjan, Oct 19 '18 at 13:44
@mplungjan I'm not able to get the answer your linked to work right. I want the div to have a fixed position, but whenever I do that, the div doesn't even appear. It appears like it should if I don't add CSS to it. — Robby, Oct 19 '18 at 15:37

score 0 · Answer 1 · answered Oct 19 '18 at 16:36

Add a <div class="nav"></div>
Add <script src="nav.js"></script>
use something like this:

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>

Navbar in an iframe

1 Answers1