View Full Version : HTML / Javascript external menu coding

05-22-2009, 12:12 PM
This has got me banging my head at the moment, I have been looking at tutorial pages all morning and am not getting anywhere. I have a website with a Javascript menu which is currently on each page. However the website is growing and changing any code within the menu is getting time consuming. I have written the site in HTML but haven't got the hang of CSS yet (which is how I want the site to go).
My main problem is (I think!) that I can't figure out what to put in the body part of my code where the menu should be.

The coding in the header part reads as follows:

<link rel="stylesheet" type="text/css" href="slashfiles/menu.css" />
<script type="text/javascript" src="slashfiles/menu.js">

and the coding in the body part where the menu currently is reads:

<div class="sdmenu">
<span class="title"><img src="slashfiles/expanded.gif" class="arrow" alt="-" />Home</span>
<div class="submenu">
<a href="../index.htm#about">About Us</a>
<a href="../index.htm#contact">Contact Us</a>
<a href="../index.htm#news">Group News</a>

<span class="title"><img src="slashfiles/expanded.gif" class="arrow" alt="-" />Committee</span>
<div class="submenu">
<a href="../committee.htm#members">Hyndburn Group Committee</a>
<a href="../committee.htm#meets">Meetings</a>
<a href="../committee.htm#joinus">Join the Committee</a>
<a href="../committee.htm#policies">Group Policies</a>

<span class="title"><img src="slashfiles/expanded.gif" class="arrow" alt="-" />The Walks</span>
<div class="submenu">
<a href="../thewalks.htm#prog">Group Programme</a>
<a href="../thewalks.htm#wedwalks">Wednesday Walking Group</a>
<a href="../thewalks.htm#coach">N E Lancs Coach Rambles</a>
<a href="../thewalks.htm#reports">Walk Reports</a>

<span class="title"><img src="slashfiles/expanded.gif" class="arrow" alt="-" />General Info</span>
<div class="submenu">
<a href="../general.htm#need">What You May Need</a>
<a href="../general.htm#code">The Country Code</a>
<a href="../general.htm#book">Book and Map Library</a>
<a href="../general.htm#clog">The Hyndburn Clog</a>
<a href="../general.htm#arch">Archived Documents</a>

<span class="title"><img src="slashfiles/expanded.gif" class="arrow" alt="-" />Links & Downloads</span>
<div class="submenu">
<A HREF="../links.htm">Links</A>
<A HREF="../downloads.htm">Downloads</A>

<span class="title"><img src="slashfiles/expanded.gif" class="arrow" alt="-" />Sitemap</span>
<div class="submenu">
<A HREF="../sitemap.htm">Sitemap</A>


<p align="center"><a href="javascript:slash_expandall()">Expand</a>/
<a href="javascript:slash_contractall()">Contract</a>

I have tried turning the body text into a .css file of its own and a .js file but have completely lost myself.

The site can be found here: http://www.hyndburnramblers.co.uk
Any help greatly appreciated.

05-22-2009, 04:22 PM
I think what you’re trying to do is have a single file for your menu, which you can update once and then include it on all your web pages?

If that’s right, then css alone isn’t going to help you with this. You still need to have the html which is controlling the words on the menu, and you still need to have the javascript controlling what elements of the menu appear or change colour when you hover or expand the menu etc. So, saving your html document as a .css or .js file isn’t right.

You could consider using an “include” command – see here (http://www.htmlgoodies.com/beyond/webmaster/article.php/3473341) for a basic explanation. This would allow you to have one file including your menu html, and then a statement in each web page which imports the menu html into the rest of the page. I’m not too familiar with this but this might point you in the right direction.

A possible alternative, if you are using some sort of web editing package like Dreamweaver, is to make use of the template functionality where you would effectively save the menu as a template and then use it as the basis for all the other pages.

Hope this helps. Maybe others can suggest other ways of doing what you’re after.

05-22-2009, 04:50 PM
Thanks for that SB65, much appreciated.
Have had a quick try without uploading but it doesn't want to work so will try and upload it and try then.

I've never used Dreamweaver et al as I've only ever hand coded!!

05-22-2009, 06:56 PM

Tried the link SB65 told me about to no avail :(

Have tried loads of other advice forums too but can't get anything else to work either. One site did mention framesets but I don't really like them and feel I may be taking a backwards step in the coding.
Looks like I may have to change the menu somehow....

05-23-2009, 07:26 AM
Morning Churchman, hope your head's not too sore.

Sorry that didn't work. Using php might work for you instead. Have a look at this thread;


which covers the approach well.

05-25-2009, 06:57 PM
Cheers SB65. Have been away for the weekend so will check it out tomorrow now.

05-27-2009, 12:45 PM
Ermmmmmm.......a little over my head that php stuff!! I'm gonna have to do some serious studying!!!
In the meantime looks like I'm gonna have to continue changing every page. Sob!!

Thanks again for your help, much appreciated.

Lola Vavoom
06-25-2009, 06:55 AM
I've got similar problem - 200 pp website so every tiny change has to be replicated 200x !!
Anyway, found this, and it works pretty well: