# 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` ```html

Responsive Sidenav Example

This example use media queries to transform the sidenav to a top navigation bar when the screen size is 900px or less.

We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.

You will learn more about media queries and responsive web design later in our CSS Tutorial.

Resize the browser window to see the effect.

``` `news.html` ```html

News

``` `about.html` ```html

About

``` `contact.html` ```html

Contact

``` `style.css` ```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](https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_responsive). 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` ```html ``` 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 `` below). `index.html` ```html Include with jquery
```
```javascript $('.menu').load('menu.html'); ``` inside `main.js` 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: ```html
``` Full code as .zip file ## 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`: ```php ``` 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` ```php

Responsive Sidenav Example

This example use media queries to transform the sidenav to a top navigation bar when the screen size is 900px or less.

We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.

You will learn more about media queries and responsive web design later in our CSS Tutorial.

Resize the browser window to see the effect.

``` Nothing changes except that the menu is replaced by the line ```php ``` which will load the code from `menu.php` into that location of `index.php`. Full code as .zip file