Skip to content

Instantly share code, notes, and snippets.

@davidvandenbor

davidvandenbor/README.md

Last active April 30, 2020 22:51
Show Gist options
  • Save davidvandenbor/999ee44cb21e045c1043eb5f61c9419b to your computer and use it in GitHub Desktop.
Save davidvandenbor/999ee44cb21e045c1043eb5f61c9419b to your computer and use it in GitHub Desktop.
Download ZIP
gist-html-includes-with-standard javascript
Raw
README.md

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 this into 20 or 30 webpages: 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.

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 as the currently loaded page. It does this by checking the URL that's actively present in the address bar of your browser.

See it in action

See a working version online that you can download (ZIP) or edit live in Plunker: https://plnkr.co/edit/gist:999ee44cb21e045c1043eb5f61c9419b

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="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="scripts.js"></script>
</body>
</html>
Raw
menu.html
<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>
Raw
page-2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="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="scripts.js"></script>
</body>
</html>
Raw
page-3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="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="scripts.js"></script>
</body>
</html>
Raw
page-4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="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="scripts.js"></script>
</body>
</html>
Raw
scripts.js
/*
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() {
linkObj = document.querySelectorAll("#menu a");
for (i = 0; i < linkObj.length; i++) {
if (document.location.href.indexOf(linkObj[i].href) >= 0) {
linkObj[i].classList.add("active");
}
}
}
window.onload = function () {
setTimeout(function () {
setActive();
}, 500);
};
Raw
style.css
body {
font-family: Arial, sans-serif;
margin: 0;
animation-name: fadeIn;
animation-duration: 1s;
}
@-webkit-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: 100%;
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;
}
}
/* @end MENU ----------- */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment