0

I am responsible for managing several .html pages which follows a rather simple bootstrap template that includes a nav bar. The problem is, as I continue to build out more pages, often times I am going back to redo the nav bar on each individual .html page.

While very time-consuming, I was under the impression when I learned about front-end markup that there wasn't another way to go about managing your nav bar.

I tried searching for this thread before asking a question, but I wasn't able to find one that hit close to home for me.

I am curious, is there a way to manage the nav bar for all your html pages from a single point or destination, without having to go back into each individual .html page and add the necessary changes? It would be nice if someone could recommend a vanilla html/css/js solution, if not I am open to any recommendations for any frameworks that may cater to this problem.

Lasagna Cat
  • 297
  • 3
  • 24
  • I haven't used basic html in a while, but in things like `ejs` `pug` `mustache` you can make a header part of an html page and just include it in each of your other html pages. I do not know if using basic js and html give you that functionality, but as I said it has been a while since I used those to alone and that was it. – Taylor Austin Nov 06 '17 at 16:49
  • This sort of question won't solicit quality answers because there are too many options; none is 'right' or objectively better. You could use JavaScript to insert the Nav element on each page, you could use server-side includes (SHTML), or any numerous other options that allow your HTML pages to be output from templates. – Robert Nov 06 '17 at 16:50
  • try [this](https://stackoverflow.com/questions/18712338/make-header-and-footer-files-to-be-included-in-multiple-html-pages) – Bhaumik Pandhi Nov 06 '17 at 16:51
  • you have to add your code to let us better understand what you are doing. create your header as a separate file and query it... I use Ajax to call and insert elements like that. – DIEGO CARRASCAL Nov 06 '17 at 16:51

1 Answers1

1

Add the script tag in index.html (or other page you want to use it) like this: 

<script style="text/javascript" src="navLoader.js"></script>

Delete all the navbar code from index.html (or other pages that will use the navbar) and replaced with: 

<div class="navbar-frame"></div>

Create a navbar.html file with all the navbar code: 

<!--Header bar!-->
      <nav class="navbar navbar-default navbar-fixed-top">
       <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/index.html">Your Stuff</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="background-header"><a href="#">Test 1</a></li>
            <li class="background-header"><a href="#">Test 2</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle background-header" data-toggle="dropdown" role="button" aria-expanded="false">Projects <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li class="dropdown-header dropdown-divisor">Java</li> 
                <li class="background-header"><a href="/TEXTLAND/Textlandrpg.html">TEXTLAND textual RPG</a></li>
                <li class="divider"></li>
                <li class="dropdown-header dropdown-divisor">HTML5 & Javascript</li>
                <li class="background-header"><a href="#">Another test</a></li>
                <li class="divider"></li>
                <li class="dropdown-header dropdown-divisor">HTML/CSS</li>
                <li class="background-header"><a href="/CSSolarSystem/SolarSystemHTMLCSS.html">CSSolar System</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li class="background-header">
                <a href="#">Contact
                    <span class="sr-only">(current)</span>
                </a>
            </li>
            <li class="background-header"><a href="#">Leave a comment</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

and then create a navLoader.js file with this .load method: 

$(document).ready(function(){
    $("#navbar-frame").load("navbar.html");
});

Every time the page is fully loaded, it will go to navLoader.js get the navbar.html and load it inside the .navbar-frame div. Now, if you need to change something in the navbar, just change the navbar.html file. And of course, change the li tags as you need, this is just an example. (using jQuery)

Calvin Nunes
  • 6,376
  • 4
  • 20
  • 48
  • Thank you for your feedback. Does jQuery CDN have to exist in both `index.html` and `navbar.html`? I want to get your example up and running so I tried using jQuery CDN 3.2.1 this one `` but it does not work. – Lasagna Cat Nov 07 '17 at 19:11
  • If the Navbar.html doesn't use any kind of javascript code, only pure html, so it doesn't need the jQuery call. You will need it only in every page that loads the navbar. don't forget that the call for jQuery must happen always before any other script. – Calvin Nunes Nov 07 '17 at 19:55
  • It was brought to my attention from someone helping me out that there were some errors in your code, such as using `class` instead of `id` for `index.html` and the ` – Lasagna Cat Nov 07 '17 at 23:13