How to apply this sidebar to all pages using CSS?

Question

I have 4 different html web pages. The html code below is for a menubar which I want to apply to all four pages. Is there any way I can do this using CSS instead of copying/pasting this menubar html code on all 4 of my html web pages? Basically the four pages are Home, News, Contact, About. Whenever someone clicks on a menubar item, it will redirect them to one of the 4 pages. And on all 4 of those pages, I want the menubar to be displayed. I want to create a CSS file which I can just link all 4 pages to and then the menubar will be displayed (code below). Thanks in advance!

Is there any way I can create a CSS file which at least takes care of the styling? And I will manually add the menubar buttons to each html page?

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="page1.html">Home</a></li>
  <li><a href="page2.html">News</a></li>
  <li><a href="page3.html">Contact</a></li>
  <li><a href="page4.html">About</a></li>
</ul>

<div style="margin-left:25%;padding:1px 16px;height:1000px;">

</div>

</body>
</html>

Is there any server side language you can use? – Stickers Jan 16 '16 at 02:45 — Stickers, Jan 16 '16 at 02:45

fnune · Accepted Answer · 2021-03-14T13:00:44.143

6

You shouldn't/can't do this with CSS. You need either:

- For a non-programmatic solution: <link rel="import" href="sidebar.html"> save your sidebar in a sidebar.html file and call it with this snippet. Check out the support tables for this function. (Deprecated)

Use ES modules: Is there a way to use es6 modules to import html template into javascript?
Use a template engine to produce the results you want.
Include it with PHP like so: <?php include 'sidebar.php'; ?>

There are more solutions, but these are the most obvious AFAIK.

edited Mar 14 '21 at 13:00

answered Jan 16 '16 at 02:20

fnune

5,256
1
21
35

I had no idea there was a pure HTML way to do this. – Shane Lessard Jan 16 '16 at 02:38
2

@FaustoNA, if you wouldn't mind, can you add, in the answer, that the support the html imports is terrible at this moment, with chrome being the only major browser that supports it? – Jacques ジャック Jan 16 '16 at 02:53
As of Feb 2020 HTML import support has been [depreciated](https://www.chromestatus.com/features/5144752345317376) – Geom Mar 14 '21 at 08:15
Off-topic: it's spelled deprecated without the i. – fnune Mar 14 '21 at 13:02

score 1 · Answer 2 · answered Jan 16 '16 at 02:18

1

You cannot achieve this with HTML and CSS only. If you have PHP server then, I suggest to create a PHP file and put your nav-bar code and then use the following PHP code in the all pages.

<?php include 'nav.php'; ?>

Here is the code for nav.php:

<?php
echo 
'<ul>
  <li><a class="active" href="page1.html">Home</a></li>
  <li><a href="page2.html">News</a></li>
  <li><a href="page3.html">Contact</a></li>
  <li><a href="page4.html">About</a></li>
</ul>';
?>

answered Jan 16 '16 at 02:18

Maihan Nijat

9,054
11
62
110

Where exactly do I place this code in my html pages? Under body, head? – Programmer Jan 16 '16 at 02:22
@javaprogrammer First you need to create `nav.php` file, and paste the code I provided you. After that use `` in the HTML page where you want to display the nav bar. – Maihan Nijat Jan 16 '16 at 02:24
but where does the go in the html file? Which part of the html file do I place it? – Programmer Jan 16 '16 at 02:25
`` this goes in the place where you want to display the navbar, yeah in the HTML file. – Maihan Nijat Jan 16 '16 at 02:27
you need to have PHP installed on the server – Mi-Creativity Jan 16 '16 at 02:31
1

Very good and simple instruction. One thing I would like to add is that the page where you put the must also be a php page. – Daniel González Cortés Jun 30 '17 at 15:46

Mi-Creativity · Answer 3 · 2016-01-16T02:38:31.263

Not with CSS, you have following options:

Use web component and javascript⁽¹⁾ to load it.
Jade template engine which is a language for writing HTML templates, produces HTML and supports dynamic code with the support for reusability (DRY), it gives you the ability to include⁽²⁾ partial HTML files in .jade with this command
```
include ./path/to/sidebar.jade
```
Example from Jade:
```
//- index.jade
doctype html
html
  include ./includes/head.jade
body
  h1 My Site
  p Welcome to my super lame site.
  include ./includes/foot.jade
```
Server-Side solution like PHP or ASP.NET.

--------------------------------------------------------------------------

⁽¹⁾ http://webcomponents.org/

⁽²⁾ http://jade-lang.com/reference/includes/

score 1 · Answer 4 · answered Jan 16 '16 at 02:19

1

There is no way to do that by css, html is in charge of the elements and css only of styling them, you can't create elements by css. I suggest you to copy and paste the code. Or look for other tools, populate it with js, php or something.

answered Jan 16 '16 at 02:19

Damian Cardozo

122
7

How to apply this sidebar to all pages using CSS?

4 Answers4

--------------------------------------------------------------------------