package.json
# Html includes with standard javascript
Play live with this code in **Plunker** > [click here!](https://embed.plnkr.co/github/davidvandenbor/html-includes-with-standard-javascript)
[](https://embed.plnkr.co/github/davidvandenbor/html-includes-with-standard-javascript)
An example of how you can include "snippets" of HTML into other HTML pages. This might come in handy for things like including headers, footers, menu's or sidebars to multiple pages of a website or application. For instance, you can embed a **snippet of code** into 20 or 30 webpages simultaniously: a **single top bar navigation menu** which was saved as a reusable piece of code in a seperate text or HTML file. It takes just a couple of lines of javascript to do this.
[](https://embed.plnkr.co/github/davidvandenbor/html-includes-with-standard-javascript)
As a bonus, I've also added a few lines of code that sticks an ".active" css class on the menu item (with the name of the currently loaded page). It does this by checking the URL that's actively present in the address bar of your browser, and then [looping](https://www.w3schools.com/js/js_loop_for.asp) over the menu items to see if it matches the name of the menu link.
[](https://embed.plnkr.co/github/davidvandenbor/html-includes-with-standard-javascript)
## See it live
See a working version online that you can download (ZIP) or edit live in **Plunker**:
https://embed.plnkr.co/github/davidvandenbor/html-includes-with-standard-javascript
body {
font-family: Arial, sans-serif;
margin: 0;
padding:0;
animation-name: fadeIn;
animation-duration: 1s;
}
@keyframes fadeIn {
from {
transform: translateY(-30px)
}
to {
transform: translateY(0px)
}
}
#page-one {
background: orange;
}
h1 {
font-size: 8vw;
text-align: center;
font-weight: normal;
}
/** ------------------------------------------- //
* @group: MENU
*/
nav {
display: flex;
justify-content: flex-end;
margin: 0;
padding: 0;
width: auto;
background: #f0f0f0;
border: 1px solid #ccc;
border-right: none;
overflow: hidden;
transition: all .5s ease;
}
nav a:first-of-type {
margin-right: auto
}
nav a {
text-decoration: none;
color: #616161;
padding: 10px 10px;
text-align: center;
border-left: 1px solid #fff;
border-right: 1px solid #ccc;
/* width: 100%; */
}
nav a:hover {
background: rgb(255, 212, 120);
}
.active {
transition: all .5s ease;
background: rgb(255, 89, 0);
color: white;
}
nav label {
display: none
}
/* responsive vanaf hier */
@media (max-width:500px) {
nav label {
display: block;
font-size: 20px;
cursor: pointer;
text-align: center;
padding: 10px 5px 35px 25px;
}
nav,
nav a {
display: block;
font-size: 40px;
max-height: 40px
}
nav:hover {
transition: all .5s ease;
cursor: pointer;
padding-bottom: 50px;
overflow: hidden;
max-height: 470px;
}
}
/* alleen voor presentatie, mag weg: */
@media (max-height:400px) {
body,html {
overflow: hidden;
}
}
/* @end MENU ----------- */
# Html includes with standard javascript
Play live with this code in **Plunker** > [click here!](https://embed.plnkr.co/github/davidvandenbor/html-includes-with-standard-javascript)
[](https://embed.plnkr.co/github/davidvandenbor/html-includes-with-standard-javascript)
An example of how you can include "snippets" of HTML into other HTML pages. This might come in handy for things like including headers, footers, menu's or sidebars to multiple pages of a website or application. For instance, you can embed a **snippet of code** into 20 or 30 webpages simultaniously: a **single top bar navigation menu** which was saved as a reusable piece of code in a seperate text or HTML file. It takes just a couple of lines of javascript to do this.
[](https://embed.plnkr.co/github/davidvandenbor/html-includes-with-standard-javascript)
As a bonus, I've also added a few lines of code that sticks an ".active" css class on the menu item (with the name of the currently loaded page). It does this by checking the URL that's actively present in the address bar of your browser, and then [looping](https://www.w3schools.com/js/js_loop_for.asp) over the menu items to see if it matches the name of the menu link.
[](https://embed.plnkr.co/github/davidvandenbor/html-includes-with-standard-javascript)
## See it live
See a working version online that you can download (ZIP) or edit live in **Plunker**:
https://embed.plnkr.co/github/davidvandenbor/html-includes-with-standard-javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body id="page-one">
<!-- The empty <nav> below is where the menu is imported -->
<nav id="menu"></nav>
<main>
<h1>Page 1</h1>
</main>
<!-- the link to the javascript file containing the import code -->
<script src="js/scripts.js"></script>
</body>
</html>
/*
HTML includes via fetch()
This only works if you visit the site in
the browser by using the Live view function, which
uses IP adresses, like http://.......
or if you open the site in the browser after uploading
to the Hanze server (also http://........)
So, it doesn't work if you open the file from your
laptop in the browser (users/document/ect....)
*/
/*
Example: This loads menu.html into the HTML element <nav>
=====================================================
*/
fetch("./menu.html")
.then((response) => {
return response.text();
})
.then((data) => {
document.querySelector("nav").innerHTML = data;
});
/*
Example (not used): loads footer.html into the HTML element <footer>
=====================================================
*/
/*
fetch("footer.html")
.then((response) => {
return response.text();
})
.then((data) => {
document.querySelector("footer").innerHTML = data;
});
*/
/*
BONUS!!! Stick an ".active" class
on the menu link of the current page!!!
In this case, it looks for all the links (a)
in the container with the ID of "menu"
=====================================================
*/
function setActive() {
var linkObj = document.querySelectorAll("#menu a");
for (var i = 0; i < linkObj.length; i++) {
if (document.location.href.indexOf(linkObj[i].href) >= 0) {
linkObj[i].classList.add("active");
}
}
}
// wait for half a second for the page to load,
// THEN stick the classes to the menu items
window.onload = function () {
setTimeout(function () {
setActive();
}, 500);
};
<label>Menu</label>
<a href="index.html">Home</a>
<a href="page-2.html">Page 2</a>
<a href="page-3.html">Page 3</a>
<a href="page-4.html">Page 4</a>
{
"title": "html-includes-with-standard-javacsript",
"description": "Using vanilla javascript to create reusable include snippets for HTML pages",
"main": "index.html",
"scripts": {
"start": "parcel index.html --open",
"build": "parcel build index.html"
},
"dependencies": {},
"devDependencies": {
"@babel/core": "7.2.0",
"parcel-bundler": "^1.6.1"
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- The empty <nav> below is where the menu is imported -->
<nav id="menu"></nav>
<main>
<h1>Page 2</h1>
</main>
<!-- the link to the javascript file containing the import code -->
<script src="js/scripts.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- The empty <nav> below is where the menu is imported -->
<nav id="menu"></nav>
<main>
<h1>Page 3</h1>
</main>
<!-- the link to the javascript file containing the import code -->
<script src="js/scripts.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- The empty <nav> below is where the menu is imported -->
<nav id="menu"></nav>
<main>
<h1>Page 4</h1>
</main>
<!-- the link to the javascript file containing the import code -->
<script src="js/scripts.js"></script>
</body>
</html>