Include partials
Contents
Include partials¶
It’s common to have parts of a website (like a menu) present on all sub pages. This partials could be inserted as HTML code into every .html file directly or inserted with a link to that file.
Insert code by hand¶
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<ul class="sidenav">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
</ul>
<div class="content">
<h2>Responsive Sidenav Example</h2>
<p>This example use media queries to transform the sidenav to a top navigation bar when the screen size is 900px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
</body>
</html>
news.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<ul class="sidenav">
<li><a href="index.html">Home</a></li>
<li><a class="active" href="news.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
</ul>
<div class="content">
<h2>News</h2>
</div>
</body>
</html>
about.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<ul class="sidenav">
<li><a href="index.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a class="active" href="about.html">About</a></li>
</ul>
<div class="content">
<h2>About</h2>
</div>
</body>
</html>
contact.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<ul class="sidenav">
<li><a href="index.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a class="active" href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
</ul>
<div class="content">
<h2>Contact</h2>
</div>
</body>
</html>
style.css
body {
margin: 0;
}
ul.sidenav {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
ul.sidenav li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
ul.sidenav li a.active {
background-color: #4CAF50;
color: white;
}
ul.sidenav li a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 25%;
padding: 1px 16px;
height: 1000px;
}
@media screen and (max-width: 900px) {
ul.sidenav {
width: 100%;
height: auto;
position: relative;
}
ul.sidenav li a {
float: left;
padding: 15px;
}
div.content {margin-left: 0;}
}
@media screen and (max-width: 400px) {
ul.sidenav li a {
text-align: center;
float: none;
}
}
Code for the menu from W3Schools.
This is valid but not nice if we want to make changes to the menu (like change the order of the items or append a new one) because we have to modify all .html files then.
Instead it’s better to write the code for the menu once and include a reference to that code in each page. Unfortunately this doesn’t work out of the box, but there are several methods to do it of which two are presented below.
Insert with jQuery¶
The menu will be stored in a separate .html file:
menu.html
<ul>
<li><a href="index.html" id='index'>Home</a></li>
<li><a href="projects.html" id='projects'>Projects</a></li>
<li><a href="contact.html" id='contact'>Contact</a></li>
<li><a href="about.html" id='about'>About</a></li>
</ul>
Then it’s inserted via jQuery into each page. This requires a jquery.js file inside a folder js or a reference to a CDN (see the <head> below).
index.html
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="Comma-separated keywords">
<meta name="description" content="Brief description">
<meta name="author" content="You">
<title>Include with jquery</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<!-- Alternatively via CDN: -->
<!--<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
</head>
<body>
<div class='flex-container'>
<div class='menu active-index'>
<!-- inserted via js -->
</div>
<div class="content">
<div class="img-index">
</div>
</div>
</div>
<script src="js/main.js" charset="utf-8"></script>
</body>
</html>
js/main.js:
$('.menu').load('menu.html');
This code will load the content of menu.html and insert it into the div with class='menu'.
For visualizing the active link inside the menu each page has an identifier:
<div class='menu active-index'></div> <!-- for index.html -->
<div class='menu active-projects'></div> <!-- for projects.html--->
<!-- ... -->
Insert with PHP¶
Another approach is to insert code with the server side programming language PHP. The disadvantage is that this requires a server with PHP running your website. (Real web server have that by default, but for your local computer you have to setup a server with PHP.)
The menu will be stored in a separate file called menu.php:
<ul class="sidenav">
<li><a href="index.php">Home</a></li>
<li><a href="news.php">News</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="about.php">About</a></li>
</ul>
Notice that files which include PHP code have the file ending .php. So we have to rename the file endings inside the menu and accordingly the names of the HTML files.
index.php
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<?php include 'menu.php'; ?>
<div class="content">
<h2>Responsive Sidenav Example</h2>
<p>This example use media queries to transform the sidenav to a top navigation bar when the screen size is 900px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
</body>
</html>
Nothing changes except that the menu is replaced by the line
<?php include 'menu.php'; ?>
which will load the code from menu.php into that location of index.php.