What's the alternative to Frames?

Code the menu just once - not every page

[cdgeorge]

I have a standard menu bar that runs along the top of my webpages for each and every page on my site. Without using frames, how is it best to source that menu bar so the code is not written up for each page?

Is there a clever way of doing this in CSS so I can also avoid javascript?

[tedster]

The most straightforward approach is called a server-side include (SSI). You'll find many threads around here on the topic. It's neither javascript nor css, so it makes no extra demands on the browser or user agent.

The idea is that you have one file for your menu (or footer, or whatever), and in each page you make a "call" for the server to include that file in the document it serves. So you only code your menu in one spot, but when a page is actually served that mark-up is included. If the end user does a View Source, they see the menu code and not the code for the include.

In the default situation, this means that the file extension for the page is .shtml. However, there are ways on most servers to allow the extension to be .html and still have the page call an included file.

[edited by: tedster at 6:35 pm (utc) on Oct. 16, 2004]

[figment88]

it is common to do this via the webserver using PHP, ASP, SSI, etc. or I believe you can also instruct Apache directly to include the same file at the top of every page.

[cdgeorge]

SSI looks like the answer, but I am doing all my html code on my PC then uploading to my hosting company - I don't have any server side software running on my PC. Should I be running something like Apache on my PC locally with the necessary SSI commands so I can test your solution out? And if it does work, how do I upload server side commands to the hosting company's Apache servers?

[figment88]

Yes, you should be running a development environment on your local machine.

However, if you are just doing one-off kind of stuff (i.e infrequent), you should be able to view both the header and body locally, upload them to your server in a test area, then if everything looks ok, push it live.

[kaled]

I think its worth pointing out
1) Without frames, the navigation bar will scroll out of view
2) An Iframe can be used to display the navigation bar with little difficulty

I have devised a system that uses frames if javascript is available and falls back to Iframes if not. The system is too complex to explain here and I have yet to upload it (as part of a site overhaul) so I can't sticky a link to you.

In fact, with { position:fixed } using an Iframe, the nav bar can be permanently visible (non-scrolling) but this is not supported by IE.

Kaled.

[tedster]

Another point about included menus of all types - unless you take some other steps, this approach will place a "live" link on some pages that simply reloads the current page. Although many sites do this, it is still a usability stumbling block.

This is the main reason why I prefer using an "extended" replace function to edit menus, rather than a bare-bones included file of some kind.

[kaled]

Actually, I have added a link back to each index page on my site from every other page in the directory. It occured to me a while back that I'm losing PR if pages don't link back to the index page by some route or other.

So even though I use a navigation bar system, I also have a link-to-same-page on each index page. Since this link is at the top-left of the page (small and discrete) I find the page transitions appear tidier with this consistency.

Kaled.

[cdgeorge]

Thanks everyone, I knew nothing about this and have now found the perfect little solution. Firstly, take instructions from this link [tizag.com...] and actually copy and paste the example code they used to prove it works.

Make sure you have a personal web server running on your computer; I found that apache used too much resources so I installed KF webserver from [keyfocus.net...] (but found this product from www.nonags.com). You must also download and install PHP (I chose PHP version 5). Then configured KFWS to use PHP (see FAQ on their site).

It works like a dream!