4

My website has the same navigation menu throughout, instead to rewriting the HTML code for every page, can I link to a second HTML file (that contains the nav HTML code) like you would with CSS? Or will that create problems?

Emmet Arries
  • 539
  • 2
  • 12
  • 35
  • Maybe duplicate of http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file ? Hope that helps. – AndySw Feb 07 '16 at 04:46
  • You will probably want a templating framework for this. There are about a million of them. The one I use is Jekyll, though there should be others that are geared towards more beginning users of HTML. Alternatively you could use server-side includes. – Maximillian Laumeister Feb 07 '16 at 04:49
  • Thanks for the tips and link! – Emmet Arries Feb 07 '16 at 05:15

4 Answers4

9

Simple way would be to put the header part in a separate html file.

Now load this file in html code using jQuery load function like

$("#headerDiv").load("header.html")

Know that, this will require web server because load function sends a request to server.

Check out the code sample:

demo.html

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script> 
   $(function(){
    $("#headerDiv").load("header.html");
   });  
</script>
</head>
<body>
<div id="headerDiv"></div>
<!-- Rest of the code -->
</body>
</html>

header.html

<div >
    <a>something</a>
    <a>something</a>        
</div>
Peyman Mohamadpour
  • 17,954
  • 24
  • 89
  • 100
pritesh
  • 533
  • 4
  • 15
5

for an HTML solution -since you have no other tags in your question- there is HTML imports:

<link rel="import" href="nav.html">

But this new -working draft- and it doesn't have good browser support.

Resources:

Mi-Creativity
  • 9,554
  • 10
  • 38
  • 47
  • Sorry about the lack of tags, I wasn't sure what was needed! I will probably use a server-side JavaScript/jQuery solution! Thanks for your response! – Emmet Arries Feb 07 '16 at 05:09
  • Sure, I've always used server-side for this, also as people suggested using js frameworks – Mi-Creativity Feb 07 '16 at 05:16
  • Do you have any code I could use? One of the other posts mentioned code but have yet to provide it. Is there a js framework you recommend? Or any other suggestions? I'm new to website design and am open to anything. – Emmet Arries Feb 07 '16 at 05:21
  • PHP ``, using AngularJS you can do this `
    ` [**`ng-include` example**](http://www.w3schools.com/angular/tryit.asp?filename=try_ng_include)     – Mi-Creativity Feb 07 '16 at 05:29
  • Thanks again! A W3Schools link, I love them! – Emmet Arries Feb 07 '16 at 05:30
5

That is called HTML includes, and YES, it is possible

<div w3-include-HTML="content.html">My HTML include will go here.</div>
<script>
(function () {
  myHTMLInclude();
  function myHTMLInclude() {
    var z, i, a, file, xhttp;
    z = document.getElementsByTagName("*");
    for (i = 0; i < z.length; i++) {
      if (z[i].getAttribute("w3-include-html")) {
        a = z[i].cloneNode(false);
        file = z[i].getAttribute("w3-include-html");
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
          if (xhttp.readyState == 4 && xhttp.status == 200) {
            a.removeAttribute("w3-include-html");
            a.innerHTML = xhttp.responseText;
            z[i].parentNode.replaceChild(a, z[i]);
            myHTMLInclude();
          }
        }      
        xhttp.open("GET", file, true);
        xhttp.send();
        return;
      }
    }
  }
})();
</script>

NOTES

HTML doesn't have a simple include mechanism (except for frames like iframe, which have side effects).

A better solution would be to use Server-Side includes, which is the preferred way of adding common parts to your document, on the server, of course.

Peyman Mohamadpour
  • 17,954
  • 24
  • 89
  • 100
0

W3schools has an include. They also have there own CSS as a side note. Put the callup in footer (wherever)

<script src="vendor/w3js.min.js"></script>
<script src="w3.includeHTML();"></script>

And then on page:

<header class="header navbar-fixed-top">
    <nav id="inc_nav" w3-include-html="nav.html"></nav>
</header>

    <section id="inc_header" w3-include-html="header.html"></section>

    <div id="content" tabindex="-1"></div>
tradesouthwest
  • 156
  • 1
  • 7