Same menu on every page

Question

I have a website that has menu on every page. But, When I try to add new link on the menu, I had to add the link on every page individually. So, I used HTML and CSS like this so I just have to edit one thing, but it will just show up as "Home" with "a" tag on it instead of showing "Home" as hyperlink.

<!DOCTYPE html>
<html>
  <head>
  <style>
    .menu:after{
    content: "<a href="/index.html">Home</a><a href="/game">Games</a>";}
  </style>
  <title>Page</title>
  </head>
<body bgcolor="#cccccc">
  <center>
    <div class="menu"></div>
  <center>
</body>
</html>

The `content` property does not allow HTML inside of it. You most likely want to use a server-side language such as PHP to accomplish this. — jsea, Apr 08 '14 at 23:06
Learning and setting up a server-side environment doesn't make much sense for this task, unless your host already has PHP and you feel like learning PHP anyways. It's pretty trivial to accomplish this with JavaScript; and you can keep the script in its own .js file and include it on every page. Have the JS build the DOM on page load. See b4ttl3m4st3r's answer below. Note that jQuery isn't a requirement here, just an optional tool. — Jason C, Apr 09 '14 at 00:50

score 3 · Answer 1 · answered Apr 08 '14 at 23:10

3

create a page call

menu.php and put the menu, for example with your code

<a href="/index.html">Home</a><a href="/game">Games</a>;

then in your index.php

<?php 
include('menu.php');
?>

answered Apr 08 '14 at 23:10

Josue Francisco Orellana Vega

69
8

score 2 · Answer 2 · edited May 23 '17 at 10:33

2

You cannot do that using CSS because the style would have to alter the DOM. CSS is simply not designed and not legitimized to alter the DOM.

CSS content property: is it possible to insert HTML instead of Text?

What you probably should do is using a server-sided pre-processing language like PHP to go with templating.

Another solution would be using jQuery (javascript):

$('.menu').prepend('<a href="/index.html">Home</a>');

edited May 23 '17 at 10:33

Community

1
1

answered Apr 08 '14 at 23:15

b4ttl3m4st3r

104
11

+1 because I'm not sure why the other answers felt that the OP should learn a server-side technique for doing this. That said, this answer would be even better if you added a plain old JavaScript option that did not introduce a jQuery dependency. – Jason C Apr 09 '14 at 00:47

score 1 · Answer 3 · answered Apr 08 '14 at 23:06

That is the wrong way to go about doing something like that. What you really need is to use a language that can make templating possible. I would recommend learning PHP, it makes stuff like that much easier. With PHP, you could have a file called menu.php, with the HTML markup for the menu inside the file, and then just type include "menu.php"; when you need it. PHP (and similar languages) can do so much more than that, you won't regret learning it.

score 0 · Answer 4 · answered Apr 08 '14 at 23:06

Yikes, that is a really messy way to do it. You don't say weather you can or can't... but I really recommend using PHP for this. Create your menu in a PHP file, say 'menu.php' and include it like this

require_once("menu.php");

You will also have to change the file you put this in from .html to .php. As far as I know there is no performance issues with your method, and while you are solving your problem by putting the link in CSS, this sort of goes against everything CSS stands for. The content attribute is mainly for inserting certain characters to be styled differently.. like a custom bullet or something.

score 0 · Answer 5 · answered Apr 09 '14 at 00:02

0

PHP is the best way to go about this, as other have mentioned. Javascript can accomplish this, but it wouldn't break gracefully. If the Javascript didn't work or was turned off, you would be left without navigation.

I thought I would just mention some other possibilities.

iframe: <iframe src="/nav.html" seamless></iframe>

seamless isn't compatible with older browsers, but you can fix that with css.

SSI: 

file would have to be saved as .shtml or the server configured to parse html for ssi

answered Apr 09 '14 at 00:02

Sam

1,215
1
9
16

These days, if JavaScript is turned off, the user is likely too busy having a miserable browsing experience elsewhere to care about the OP's page. – Jason C Apr 09 '14 at 00:48
Fair point, but it also shifts the processing to the client, which could cause visible discrepancies in the page loading, as opposed to php. – Sam Apr 09 '14 at 02:27
Seamless was completely removed from HTML5. – The Doctor May 17 '21 at 18:15

Same menu on every page

5 Answers5

Linked