So you've got a website consisting of multiple pages and you're tired of changing the links and information in the header/menu on each and every page. A neat solution is to have one header/menu file and to load this header/menu file dynamically on each page of your website. This way you are able to change the details on one page and have the details reflect on all pages containing the menu.
For the purposes of this example, we are making use of Bootstrap and jQuery. The first step is to create menu.html and insert the following code that creates the navbar which will form the menu on all pages:
menu.html
<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 href="#"><img src="assets/img/logo.png" style="height: 56px; padding-top: 7px; margin-right: 20px; margin-left: 10px;"/></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li id="homeListElement" class="active"><a href="index.html">Home</a></li>
<li id="link1ListElement" class="active"><a href="page1.html">Page1</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="tel:0878055705">
Call <i class="fa fa-phone"></i><span id="contactNumber"> 087 805 5681</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
The next step is to insert a div in the file in which you want the menu to load. The purpose of the div is to serve as a 'container' which will house the dynamically loaded menu.html file. You'll notice in the code snippet above there is an HTML file called page1.html. Create a file called page1.html and insert the following code snippet which will contain the div mentioned above:
page1.html
<head>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
</head>
<body>
<div id="menu"></div>
</body>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/menu-loader.js"></script>
** Note the inclusion of jQuery and Bootstrap in page1.html. Also note the inclusion of menu-loader.js which is described below. The same process above can be repeated on every page on which you want the menu to load.
The final step is to create a Javascript file which will initiate the loading of menu.html on page1.html. In short header.html will be inserted into the 'menu' div on page1.html. Create a Javascript file called menu-loader.js and insert the following code:
menu-loader.js
$( document ).ready(function() {
$("#menu").load("menu.html",function(){
//INSERT CODE HERE TO BE EXECUTED AFTER LOADING menu.html
});
});
And there we have it! You now have a menu which is dynamically loaded on every page and you can edit all header/menu related information in one place and have this change appear on all pages where you have header/menu.