Question

I want to include the same navigation menu on multiple pages, however I do not have PHP support, nor can I affect my server in any other way.

I want to avoid simply copying and pasting the html onto all the pages as this would make updating the menu a pain.

The two options I can think of are as follows:

1) Have all the content exist on one page, then determine which content to show based on a keyword appended to the url:

example.com/index?home
example.com/index?news

2) Include a javascript file that has a function that writes the menu out and call the function on each page

function setupMenu() {
    $("#nav").html("<ul class='nav'><li>home</li><li>news</li></ul>");
}

With Option 1, the updating process would consist of editing one nav menu on the one page

With Option 2, updating would mean changing the function in the javascript file

My concern with Option 1 is that the page would have to load a lot of content that it wouldn’t need to display. My concern for Option 2 may seem trivial but it is that the code can get messy.

Are there any reasons doing it one way would be better than the other? Or is there a third superior option that I’m missing?

Answer 1

You have a few options, each with its own advantages and drawbacks:

• Server Side Includes, or SSI. If you don’t have PHP there’s a good chance you don’t have SSI either, and this option requires some irritating mucking-about with your .htaccess file. Check Dominic P.’s answer for a writeup of SSI. The benefit of SSI over JavaScript or Frames is that it doesn’t require the user to have JS enabled – which a lot of users don’t – and it also doesn’t present any navigational difficulties.

• Frames. You could either use standard frames to put the navigation in its own separate file, and with the correct styling it would be seamless. You could also use an iframe to place your navigation in an arbitrary part of the site, like a sidebar or whatever. The downside to frames, particularly standard frames, is that they tend to make bookmarking, links and the forward/back buttons behave oddly. On the upside, frames don’t need browser compliance or server support.

• JavaScript. You can refer to any of the other answers for excellent explanations of the JS solution, particularly if you’re using jQuery. However, if your site isn’t otherwise dynamic enough that your users will want to have JavaScript enabled, this will mean that a large number of your viewers will not see the menu at all – bad, definitely.

–