CODEWITHSUNDEEP
htmlcss
user3513005
user3513005

Reputation: 31

Same menu on every page

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>

Upvotes: 2

Views: 16263

Answers (5)

Sam
Sam

Reputation: 1243

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: <!--#include virtual="/nav.html" -->

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

Upvotes: 0

b4ttl3m4st3r
b4ttl3m4st3r

Reputation: 106

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>');

Upvotes: 2

Josue Francisco Orellana Vega
Josue Francisco Orellana Vega

Reputation: 89

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');
?>

Upvotes: 4

Josh
Josh

Reputation: 830

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.

Upvotes: 1

Shan Robertson
Shan Robertson

Reputation: 2742

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.

Upvotes: 0

Related Questions