How to include a navigation menu in HTML

Hello,

I am trying to implement a navigation menu in a site that uses strictly HTML, I want to 'include' this menu on all pages of the site and simply have to update it from one central location.

I know how to do this in .php, all I have to do is create the menu on a page called 'leftmenu.inc' for example and add the following:
<?php include('leftmenu.inc'); ?> to each one of the pages where I wish to include the nav menu.

Is there any way to do this in a straight .html (i.e. non .php site)?

Thanks!

No way to include stuff, unless your server has at least SSI functionality included.

However you usually have to rename your pages as .shtml to make that work.

Hi g1, thanks for such a quick reply..

If its not possible using .html, then I can keep my site in .php (I purchased it from someone with more php knowledge than I have and, seeing that I could not get a simple link exchange form to work on a .php page, thought I would convert everything to .html).

One option is to make all pages .php (where I am including the nav menu) but keep the submit link exchange request form in HTML--so I will have to update my nav menu from the central location AND on the .html page manually (or just leave the nav menu off of the submit link .html page altogether).

But..it seems like bad form to have a site that uses all .php pages and one single .html page. What's your opinion?

Thanks,
Bill

Don't change your file extensions to run a nav include on each page, that's silly:

create an .htaccess file with this:

php_value include_path ".:/usr/www/yourusername/includes"
AddType application/x-httpd-php .htm .html

on it.

This will run all your pages as php even with .htm or .html extensions.

the include path should be set from the server document root to your include folder
echo $_SERVER['DOCUMENT_ROOT'];
will give you the document root path. Replace the part after .: with your real server path, document root is up to the website root, so if you want the include path below that you have to slice off the last directory name and replace it with includes.

I usually put my include folder below the site root so that hackers etc can't directly access the files, more secure that way.

then on each page you'd just have this:

<?php include('leftnavigation.html'); ?>
or whatever you called the left nav include, doesn't matter.

that left nav will live in the include folder you created.

That's all you have to do, presto, dynamic site with a few lines of code.

Someone at this point will always point out that there is an overhead to running each page as php, but you are running each page as php anyway, since they all have the include on them, and besides, until you run your own servers, dedicated, that's not your problem, it's your web hoster's problem, wait to worry about things like that the day you have to decide whether or not to setup a second dedicated server because the first one is maxing out, that's around 1/2 a million visitors a day or thereabouts, depending on the site.

Thanks lizardz,

I will try this--might take awhile(for me )--but I'll post back when done!

Thanks!

Once you set your include folder path, create the .htaccess file - WARNING: do not, I repeat NOT, use any microsoft product to create that file, it's a plain text file, saved as
.htaccess
that's dot htaccess

use a real text editor, grab crimson editor to make it, it's free. Or if you already use one that's fine. Do not use frontpage, do not use wordpad, do not use notepad, and definitely do not use word

These will all cause you pain and create possible issues that will make you think you did something wrong when you didn't.

Use a real ftp client, filezilla is good and free, if you already have a real one use that.

all .htaccess files must have a linebreak after the last line of code, I'll use <br> to indicate a regular old <enter key> line break, like this:

php_value include_path ".:/usr/www/yourusername/includes"<br>
AddType application/x-httpd-php .htm .html<br>

If you forget the last break, you will generate a 500 internal server error.

Again, do not actually put a <br> in the code, use <enter> key, linebreak.

If you do all this, it will just work, as long as your webhoster supports basic htaccess stuff. If they don't, move to another hoster.

.htaccess files must be transfered by ftp using ascii text mode, not binary. If your ftp client is not set to automatically select binary/ascii mode based on extension, set it do so, then add .htm, .html, .htaccess, .inc, .php to the extension list to make sure you never transfer any of these file types in binary mode. Transferring any php or htaccess file in binary mode can cause strange and very hard to diagnose errors in the script execution.

I want to 'include' this menu on all pages of the site and simply have to update it from one central location

The simplest seems to use a good search & replace program like Replaceme (freeware). You place your menu between <!-- menu --> comment tags and ask the S&R program to replace whatever is in between these tags on all pages.

"simplest seems to use a good search & replace program like Replaceme"

Nope, the simplest is to use php or asp includes, using programming is alwayw a superior option, it's easy to learn, the include statement isn't even programming, it's just a single statement, one menu, one place, one file updated, one file uploaded.

Read the directions in this thread, try it, you'll be amazed, and in a year or two you'll look back at all the sites you've made and wonder how you could ever have done it that way. Do yourself a favor, try it.

But good tip on the search and replace program.

If I understand what you're trying to do - it sounds like a "template" would do the job.

I use Dreamweaver and it has a great template capability. That's where I put all the common stuff for all my pages - if you change the template, Dreamweaver automatically updates all the pages that use the template.

Of course, you may not be using Dreamweaver ..

Hey lizard...was that a C & P...? I seem to recall reading that text editor advice somewhere before...LOL

No matter - it's sound advice.

>> You place your menu between <!-- menu --> comment tags and ask the S&R program to replace whatever is in between these tags on all pages. <<

While that does work, after changing all 8000 pages of the site, you then have to upload all 8000 new pages to the webserver again.

If you were to use the includes instead, then you alter only the single included file, and then upload that single file to the server.

It's funny how much work people will do to avoid learning how to implement essentially 4 lines of code...

2 in .htaccess, one to run .html as php, one to set the include path, and then the <?php include..?> statement on the page. Oh, wait, that's only 3 lines, sorry, I miscounted.

But seriously, the sooner you step up to creating a programmed site the sooner you free yourself from trying to use dreamweaver to replace these 3 lines of code.

As g1smd noted, having to uploade thousands of web pages each time you want to update what should be done with includes might be fun the first few times you do it, but at some point the inherent logic of uploading and updating a single file and having the entire website INSTANTLY update itself is pretty much impossible to deny, although some are stubborn and try anyway.

And don't use .shtml, it's pointless, it doesn't have any power, there's no reason at all to use it rather than php or asp, I don't understand why it is used anymore to be honest, made some sense around 95-98, before asp and php got really good, but now it's just sort of s crippleware relic, like keeping that old windows 95 box with 8 megabytes of ram and pentium 66 processor, that's 66 megahertz... cute, but why bother? As soon as you get ready to move up to the next programming level you'd have to switch to php or asp anyway, why wait?

Now that's an interesting thread! So far, all my websites have been so-called micro-sites (max. 50 pages), so these issues were not my concern; but I am now working on a site that is growing fast and can potentially reach thousands (if not millions) of pages. The info about includes and php will be most useful there! Thanks!

lizardz, you are my hero of the day! I had a few hours free, so I sat down to experiment with your instructions. Well, 5 minutes later it was up and running exactly as planned and described.

This is great and indeed the best (the only) way to deal with menus and other repetitive content portions for larger sites.

One more question, though. Whilst all worked as planned online once I had my files uploaded, it does not work offline. I see the html page which I open, but without its includes. How can I see the page as it would appear online?

All server side functions like includes require that you have a server at hand to deliver the pages as you will eventually see them.

You can have a development server set up easily. But there is a handicap if you try to test the functionality of a *nix server with a Windows development server.

You can have a preconfigured ready to run off the box server - Apache with PHP and Mysql here: [link]
It is in French though when it comes to documentation. But it is easy to install.

The regular route will be to download the Apache precomplied binary from [link]
or specifically from here:
[link]

That includes a Microsoft installer to install the HTTP server. On the other hand if you want to have the real MCoy, go for a Linux box.(Highly recommended)

For a Windows machine, you can install a program like PHPdev - includes Apache, PHP, mySQL, etc - so you can actually "serve" (that is, serve via HTTP like a real website does) the pages through a local webserver (local, as in inside your desktop PC) rather than just accessing the files on the hard drive.

I see: it gets more complicated now. One of my interns had previously installed easyphp and I had to uninstall it, as it messed up a few things. I prefer to stay away from programs that I do not fully understand. In my case, I guess it will be safer to keep working offline with the view of the original files without their includes, and check the full view online. But thanks for all the tips, and I keep this thread in my Favorites.

You could instead ask your hosts to set up a separate test (or development) subdomain on your server and give you FTP access to it; say development.domain.com

You upload your site to that area and check it online. You MUST password protect that copy of your site so that no one and no search engines can ever access the content.