Putting All Levels Nav Menu in a Javascript file?

[macarthur]

1) Script Title: All Level Navigation Menu (V3.02)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...menu/index.htm

3) Describe problem: Is it possible to put all the code in a javascript file so that any adjustments to the menu items can be done in a single file?

It would make it very convenient to change a single file than having to open each and every file and make adjustments to the html menu lists.

Would appreciate your help.

Thanks.

[djr33]

Have you already tried to do this? If so, what is the result?

The script is already set up with an external Javascript file for the Javascript code that the menu is based on. But that does not include the HTML.

So you can share the Javascript (as is probably already the case) between pages, but the HTML (the menu content and specific details for your site) will not automatically be shared across pages because that's part of the pages and not part of the Javascript.


If you want to put it on all pages automatically (the HTML) then there are three approaches. In general it will involve some sort of templating.

1) Use Javascript to automatically create the menu on all pages by dynamically writing HTML. This is probably the most difficult option (and if you don't already know how to do it, then you'll likely need to hire someone; it's not a simple task), and it also would only work if Javascript is available in the browser (for every user). If not, they'd get no content. As-is, you can have some basic not-so-functional version of the menu as a fallback if the user doesn't have Javascript available.

2) Use a server side language (like PHP, CGI, ASP.net, SSI, etc.) to "include" the HTML into all of the pages. This is very easy if you know how to do it, and not too hard to learn; it does require a web server that has a serverside language available, such as PHP, but that's pretty common. If you have specific questions about one of these languages, then let us know. In short, you'd set up one file with just the HTML for the menu, then you'd import ("include") that content into all of your other pages. Sort of like a .js file, but for HTML. This would not depend on the browser, since the work would be done on the server. It would require updating every one of your pages to add this include code, but beyond that, all future updates would be automatic. For many designers (myself included) this is the preferred way to do things.

3) Rely on a 3rd-party templating system; this could either be something like Dreamweaver or Frontpage that will actually automatically write the menu into all of your files, or it could be something like a CMS (Content Management System) that dynamically builds your pages on the server. This is in some ways a little difficult to set up, but depending on your site it might work out.

[Beverleyh]

You would need to use either a

Server Side Include: http://www.javascriptkit.com/howto/ssi.shtml

OR

PHP Include: http://www.tizag.com/phpT/include.php

[macarthur]

Aloha,

Thanks for the suggestions.

I just did the shtml test on my webhost server and it displayed the date and time. :-)

So, if you could please give me an example on how to do this in SSI with all the steps I need to do, I would really appreciate it.

Mahalo.

[Beverleyh]

So the SSI example test worked.

There's not really any more instruction I can give other than what is provided in the tutorial already. Page one and page two cover it.

Basically you extract the markup for the menu, put it in an external file and then include it back on your page with the SSI syntax ( <!--#include file="menu.htm"--> )

You'd need to include the menu this way in all your pages but after you've made the initial extraction-to-SSI-substitution, you only need to edit the menu file for changes to filter site-wide.

Good luck - If you need any more help, please post a link you your page.

[macarthur]

It worked!

Thank you. Thank you. Thank you.

This will save me lots of time when it comes to tweaks/updates to the site.

Mahalo nui loa.