Sitewide Navigation Links

[alseides]

I am designing a website at my work, and there is one issue that you guys probably have a solution for.

The entire site, which when completed, will have hundreds of pages. They all have the same navigation links. What I want to implement is a way to have all those links reference the same url, so that if a link is ever added or modified, I wouldn't have to go and change the links for every single page. Instead all the links will update at the same time.

What I used to do was have the links saved in a separate .js file and call from the html page. That way I just edit the links in the .js file and so all the pages will reflect that change.

The problem with this is that it wont work for the pages that are not in the same directory. For example the link to "folder1/folder2/file.html" will work fine but it won't work for the html page that is in folder2, since referencing the link in folder2 would get the link for the file "folder1/folder2/file.html" all over again.

Hope I didn't make it too confusing, but it seems like this should be an issue that many people have to deal with.

[celgins]

Welcome to WW alseides..

It sounds like an "include" file option will work.

Since there are so many pages (100+), this probably means that you're using some type of dynamic scripting (PHP, ASP, Perl)?

If so, all have pretty clear methods for including files, and that information can be found on the web.

As far as linking goes, you should probably place your include files (the one contain the navigation links) in a folder and reference that file from any other file.

(i.e. ../includes-folder/navigationfile.txt)

This way, you go back to the root folder and access the "includes-folder" from there.

[Tastatura]

I think that you are on the right track with separate ‘link’ file (be it *.js or include). What I would suggest is to use BASE tag on every page, and structure your relative links from there. (there might be a more slick way though...)

[kaled]

Other than javascript, there are two ways to do this.

1) Use server-side-includes (SSI)
2) Use <iframe>

The problem with SSI is that it must be enabled, typically, this is done by using the file extension .shtml

The problem with <iframe> is that although you can set its width (or height) to 100% and have zero-width borders (so that it looks like part of the page) it cannot be resized automatically to accomodate the text within it.

In the general case, SSI is preferred, however, in any specific case, <iframes> may be a better solution.

Actually, there is at least one more way if you are using something like Dreamweaver - templates.
If you edit a template the change can be applied automatically to all pages that use the template. (Every affected page must then be uploaded.)

Kaled.

[alseides]

Hey thanks for all the replies. So quick! Anyways, I think that the iframes solution would be quickest and easiest way. It would work everytime for every page. However, are there any bad things that come from using iframes? I used to use them a while ago. At first I thought they were deprecated for some other alternative, but after looking around it looks like iframes are still good to go.

[Wizcrafts]

If you are having problems caused by relative URLs in your included links there are two more solutions that you can try.

Use a leading forward slash on each link, like this: /page.html

Use a fully qualified http link for all links, like this: ht*p://www.example.com/page.html

The first method makes all links relative to your web root ( / ). The latter method forces all links to go to your Domain via an http request, with no possibility of confusion if a page is ten folders deep.

Either of these methods will work with script includes, whether they are Javascript or SSI includes. Search engines like both types as they eliminate 404 results.

Wiz