How To Make Reuseable HTML Navigation Menus?

Question

I\'m sure this topic comes up all the time,
But I can\'t seem to fine a concise answer.

I\'ve got a vertical menu bar that I want to reuse in webpages (>20)

Answer 1

Server side includes are the way to go if you don't want to use a programming language.

They take this form:

<!--#include virtual="menu.html" -->

and will be inserted in the page wherever you put that tag in your HTML. It requires server side parsing, so your web server must have server side includes enabled. You can try it out, and if it doesn't work, contact your server host to see if you can get them enabled. If it's Apache, there's a method of enabling them via .htaccess files as well.

Answer 2

In order to do this, you'll have to use some server side technology. For instance you could...

• include them in php

• put them in the master page in .net

• put this in a partial or a layout page in rails

Some reading:

http://us.php.net/manual/en/function.include.php

http://msdn.microsoft.com/en-us/library/wtxbf3hh.aspx

Another solution would be to create all this using Javascript, but please don't do it like that :)

html:

<script type="text/javascript" src="hack.js"></script>
<div id="mymenu">
</div>

hack.js:

function createMenu(){
  $("#mymenu").html("all the html of your menu");
}

Answer 3

Without any server side script or Javascript you can use object or iframe tags.

http://www.w3schools.com/tags/tag_object.asp

http://www.w3schools.com/tags/tag_iframe.asp

The only thing to care is to indicate target="parent" in links.

Hope it helps

Answer 4

I was facing the same thing. Then, I created a new file for storing the html of the navigation bar.

I created a file navbar.html which had all my navigation bar code. Then, in your main html file where you want navigation bar, just include this file by using jquery.

$(document).ready(function() {
    $('#navigation').load('navbar.html');
});

Then at the place where you want navigation bar, just add this line:

<div id="navigation"></div>

Answer 5

If you would use PHP, all you have to do is use the include command, no coding beyond this one command.
Also, check out server side includes

Answer 6

As a modern answer to a six year old question: Web Components are specifically reusable HTML components, and Polymer is possibly the most popular implementation of it at the moment. Currently virtually no browser has native support for Web Components, so at the very least a Javascript polyfill is required.