Creating reusable html for navigation bar on multiple pages

24,518

Solution 1

Like it's been said, typically this is done server side with an include for non AJAX sites. However, I think you can make use of google closure templates. Basically, you define a template in their templating language, that generates a javascript function you can call to render your HTML.

http://code.google.com/closure/templates/docs/helloworld_js.html

Example:

--templates.soy

{namespace templates}

{template .nav}
<ul id="navbar">
    <li><a href="biosketch.html">Biosketch</a></li>
    <li><a href="projects.html">Class Projects</a>
        <ul>
            <li><a href="projects.html#SeniorProject">Senior Project</a></li>
            <li><a href="projects.html#WindTurbine">Wind Turbine</a></li>
        </ul>
    </li>
    <li><a href="#">Resume</a></li>
    <li><a href="#">Work Experience</a></li>
    <li><a href="#">Contact Me</a></li>
</ul>
{\template}

Then you run the following command to compile it into a javascript function

java -jar SoyToJsSrcCompiler.jar --outputPathFormat templates.js  templates.soy

This will generate a file called templates.js containing a function called templates.nav which you can call from your page like the following:

document.getElementById('navbar').innerHTML = templates.nav();

This is not even using the data merging, which would allow you to pass in a data object to render HTML that is not static. But I've only shown you this since it's all you asked for. I know you could just paste the html into a JS string also, but you's have to deal with the lack of syntax help from your editor.

The one drawback is that this requires JS which you don't seem to mind. However, if you wanted to support JS-less clients, you could generate the template on the server side. There is also a compiler that generates Java google closure methods. You can look for it on their website.

Hope it helps.

Solution 2

Use a server side language to create a navigation file. It can be static or it can be extremely complex, it's up to you.

<?php include 'includes/nav.php'; ?>

contents of nav.php can be the <nav> element entirely. You can ideally program it to show/hide elements based on the current "section", and also toggle certain classes based on the section.

Solution 3

A few suggestions:

  • If you're using JSP (or similar technology), you can simply use something like SiteMesh here to help with the templating
  • You can use server side includes
  • You can write a JavaScript function to programmatically build the DOM you need (no AJAX required) and then just call that JS function throughout your pages (no duplication of code)

Solution 4

You very much can use AJAX calls "offline" as you put it, it's client side code.

But the way I'd do this if I wasn't using a server side language (ASP.NET or PHP) is to have a small .js file that renders the navbar, and I'd just add a <script src='js/navbar.js'></script> where the navbar would go.

This way when you need to change it, you only change the .js and it would update in every other page.

Solution 5

If you are going to use the same code over and over, it might be best to create a separate file and implement it in different webpages.

It is possible through this: https://www.w3schools.com/howto/howto_html_include.asp

You write the nav bar's html in a separate .html file and call it in like this:

<div w3-include-html="content.html"></div>

Then call in a javascript function from

<script src="https://www.w3schools.com/lib/w3data.js"></script> 

which is w3IncludeHTML();

And you should have it up and running! Hope this helped! :)

Share:
24,518
ptpaterson
Author by

ptpaterson

Tinkerer of all things, especially code, gadgets and clocks. Currently working for Fauna, Inc. https://fauna.com/

Updated on March 07, 2020

Comments

  • ptpaterson
    ptpaterson over 3 years

    I thought it would be convenient to have reusable code, especially for the navigation bar because it will be the same across all of my pages. This way I won't have to go through each page and manually edit each one individually when a change occurs.

    It seems possible to use iframes, but I tried it and the whole page styling went out of whack. I can fix it but I'm wondering if there's something similar.

    It would be awesome if something like this could work:

    var navbar = document.getElementById('navbar');
    navbar.innerHtml = url('navigation.txt');

    I'm currently working offline on my site so I don't think I can make xmlhttp requests. Correct? At least I still have yet to get any ajax example to work. This is unfortunate because I think I could easily use this for my application.

    Here's my navbar markup. It's not very complicated so I have a feeling I'll just edit it manually in the end.

    <nav>
        <ul id="navbar">
            <li><a href="biosketch.html">Biosketch</a></li>
            <li><a href="projects.html">Class Projects</a>
                <ul>
                    <li><a href="projects.html#SeniorProject">Senior Project</a></li>
                    <li><a href="projects.html#WindTurbine">Wind Turbine</a></li>
                </ul>
            </li>
            <li><a href="#">Resume</a></li>
            <li><a href="#">Work Experience</a></li>
            <li><a href="#">Contact Me</a></li>
        </ul>
    </nav>
    
  • ptpaterson
    ptpaterson almost 13 years
    When I run this I get "Cross origin requests are only supported for HTTP."
  • ptpaterson
    ptpaterson almost 13 years
    This is very cool. I'm definitely going to check this out. I realize too that if I'm going to be publishing any sites on the web knowing php/asp will be important, so I'll have to start working on that here soon.
  • Ruan Mendes
    Ruan Mendes almost 13 years
    I suggest you go even further as you play with it. There's probably another chunk of html code that you use to wrap the entire page. Make that a template also so it's easier to modify the overall look. That template would call the nav template inside itself.