Externally linked navigation menu?

January 6, 2006 12:08 AM

I'm making a website in CSS, and I want it to have a left-side navigation menu. It doesn't need to be fancy, just some text links will do. What I want is to have the navigation menu externally linked, so that if I need to change it, I can change it in only one place and have it affect the whole site, like CSS does for the style. My server apparently isn't set up to use server side includes, and I prefer not to use frames.

I prefer straight coding in Notepad2 - I really hate WYSIWYG editors - even those with a code view. I've asked a couple of people who mention using DreamWeaver with its layers feature - I don't want to learn another piece of software unless I have to.

Is there any other option besides frames? Would an inline frame work, and if so, can inline frames look seamless? I want it to work in at least IE6 and Firefox, but preferably as many browsers as possible.

posted by IndigoRain to Computers & Internet (18 answers total)

Try csszengarden.
posted by kcm at 12:21 AM on January 6, 2006

<script src="leftnav.html"></script> with a bunch of document.writes in leftnav.
posted by raaka at 12:27 AM on January 6, 2006

If you don't want to use any kind of SSI, templating system, or preprocessor, then yes, you have to use frames. Inline frames can indeed look seamless; it may require JavaScript, though, if you don't know the height of the content in advance. However, most users of text-mode browsers won't be able to see the navigation, which is an accessibility problem.

If you're just serving static HTML files, you could use a preprocessor to generate them. There's everything from m4 to Kid and XSLT.

Is this going to become the website you're making? If so, the server's response headers indicate that it supports PHP. I object to use of PHP when unnecessary on the grounds that it's a shitty language, but other people will probably have recommendations for PHP-based templating systems and such if you'd like to use it.
posted by bpt at 12:28 AM on January 6, 2006

If your server doesn't support SSI (server side includes) does it support PHP or Perl ? You could achieve similar abilities with php (a la "< ? include(navigation.html); ?> )

iframe would work, you can make it appear seamless, but if won't help your google ranking - it should work in every 5.x + browser
posted by oliyoung at 12:29 AM on January 6, 2006

raaka, that's even less accessible than iframes, and it won't work with JavaScript disabled or with XHTML documents.
posted by bpt at 12:31 AM on January 6, 2006

RE: document.writes. Search engines ignore these, so if your entire navigation system uses these, your site won't be crawled with any degree of success.
posted by TheDonF at 12:54 AM on January 6, 2006

As others have said, you'd have to use frames or JavaScript, either of which would be bad for accessibility and search engine optimisation.

The best solution would be to switch to better hosting if what you currently have really doesn't allow any server side scripting (if the site's big enough to make includes a necessity, surely it'll need things like a search, contact form, etc?).
posted by malevolent at 1:14 AM on January 6, 2006

What kind of hosting company doesn't allow server-side includes? If this is a commercial set-up, I advise you to switch.
posted by madman at 1:18 AM on January 6, 2006

I'd try PHP: most hosts will allow it, and you don't even need to know PHP to get this to work. Simply create the menu in a file called, for example, "menu.html", create the rest of the page as normal but, where you would have the html for the menu, instead write

< ?php include_once(menu.html); ?>

Then save the page but, instead of calling it page.html, it needs to be named page.php. The whole thing should take five minutes and if you upload both files to your server will work perfectly for your needs assuming PHP is allowed.
posted by Hartster at 1:45 AM on January 6, 2006

Response by poster: Uh... well, it might, but my friend and I share the account at Bluehost.com, and I'll have to call her up to ask her to enable it, as she has the admin password. Can anyone confirm if Bluehost does allow SSI? I am pretty sure we have PHP but I don't know it... I have minor experience with CGI because of Ikonboard but that's it.

If Bluehost allows SSI, then I coded wrong somewhere. I used this tutorial.

BPT, good sleuthing - that's it. I'm e-mailing you, hope you don't mind.
posted by IndigoRain at 1:47 AM on January 6, 2006

You say "if I need to change it"; I think that all of the suggestions above are overkill for something that will happen rarely if ever.
I use a text-editor that does a search-and-replace on every file in my local copy of the website, and then upload all the changed files. I use Textwrangler on a Mac, but there must be dozens of free Windows apps that will do the job.
This is perhaps inelegant, but for something to be done once a month or once a year there's no point learning some fancy server-side coding stuff that you'll have to relearn if you ever want to change it.
posted by nowonmai at 2:46 AM on January 6, 2006

Okay, I know you don't want to use Dreamweaver, but did you know that you can hand code in it? Just start it up and switch into code view (View > Code), and you're basically in Notepad with color-coding and code hints. Code your page and choose File > Save As Template when you're done (instead of Save).

In the code, wherever you want to be able to have differences on individual pages based on the template, insert the following:

[!-- TemplateBeginEditable name="EditRegion1" --]EDIT HERE[!-- TemplateEndEditable --]

(Change the EditRegion1 to any identifier you want. Use greater-than/less-thans instead of the brackets.)

Save. Close. Then, start making your individual templates by choosing File > New. Click the TEMPLATE tab and select your template file. Dreamweaver will generate a new file, based on your template, with the navigation bar (and anything else) you placed on the template. On these pages, make changes ONLY in the EDIT HERE areas.

Now that you have pages based on a template, Dreamweaver will automatically update them whenever you make changes to the template file.

The only other thing you need to know about Dreamweaver is that when you start a site, you need to set it up by going to Site > Manage Sites, clicking the New button and telling it where on your harddrive to store the files.

Having said all of this, I would prefer a server-script-based solution, but I wanted to point out that Dreamweaver DOES provide a workable, easy solution to your problem.
posted by grumblebee at 3:47 AM on January 6, 2006

Bluehost's hosting plan feature list indicates they do allow SSIs. It's possible that by default it's only enabled for .shtml files, though, and not .html files. Did you try using an include on a page with a .shtml extension?

If that works, but you want your pages to be .html, you may be able to enable SSIs by creating a file called .htaccess in your web root directory, and putting this line in it:

AddHandler server-parsed .html

(Bluehost may also have a control panel that lets you do this.)

PHP would be just as easy, though.
posted by staggernation at 6:03 AM on January 6, 2006

I am a fiend for includes. I use the same little hunk of php over and over again:

<?php
include('includes/foo.php');
?>

(the above assumes you have all your includes in a directory called "includes")
posted by whatnot at 7:58 AM on January 6, 2006

The listamatic has a lot of really good examples of formatting. As for populating the links, I'm with whatnot. Using whatever language is at your disposal, just include a navbar/sidebar file on each page and any changes made to that file affect the entire site.
posted by purephase at 11:14 AM on January 6, 2006

Response by poster: Staggernation, I did indeed. I tried the .htaccess file in both my root and the test directory. If you'd like to check my code, here is the HTML and here is the CSS. The include file is currently called "navbar.shtml" and is in the test directory. (Should you look at it, I'm not stupid, LOL - the tutorial said to leave out the (HTML) and (BODY) tags but I even tried it with them in.) If the include was working, under the words "Navigation Test" on the left side (which is coded into the HTML page), you would see a Link One that goes to Yahoo and then the word Text under that.

Nowanmai - does your text editor do a search and replace on all the files without having to open them all? If so, please tell me what you're using - that would work as well!!

Purephase - that's exactly what I'm trying to do! I know how to format the list, just not include the file.
posted by IndigoRain at 3:14 PM on January 6, 2006

Response by poster: THANK YOU whoever e-mailed me with how to fix it - the include works now!!
posted by IndigoRain at 9:03 PM on January 6, 2006

Just wanted to correct Hartster's code

Reads: < ?php include_once(menu.html); ?>
Should be: < ?php include_once('menu.html'); ?>

Notice the additional single-quotes [ ' ' ] around menu.html.
Otherwise Hartster's method works great for me.
posted by MetaMonkey at 11:46 PM on January 25, 2006