One menu on multiple pages

[MvB2]

I recently designed a website for the company I work for.
Becuase I'm no HTML expert I started out using a template by Andreas Viklund.

Along the way I added several other things found on the web like a javascript menu.
The menu operates by a script in the head section of the HTML containing the links and behavior of the menu.
And a html section in the body containing the contents of the menu.
Because of this HTML portion is is stylable by CSS.

The site has grown to over a hundred separate pages and every time the menu has to change I have to alter all the pages separately.

Is there a way of centralising the menu so when it changes I only have to alter it once instead of every page separately.

THIS IS THE SCRIPT SECTION;
<script type="text/javascript">

/***********************************************
* DIT IS DE JAVASCRIPT CODE VOOR HET KEKKE POPUPMENU

* Pop-it menu- © Dynamic Drive (

http://www.dynamicdrive.com)

* This notice MUST stay intact for legal use
* Visit

http://www.dynamicdrive.com/

for full source code
***********************************************/

var defaultMenuWidth="160px" //set default menu width.

var linkset=new Array()
//SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT

linkset[0]='<a href="1400-1 (engine)_Meeting.html">Meetings</a>'
linkset[0]+='<a href="1400-1 (engine)_Information.html">Information</a>'

linkset[1]='<a>1401-1 (Cylinder head)</a>'
linkset[1]+='<a href="1401-1 (cylinder head)_Meeting.html">Meetings</a>'
linkset[1]+='<a href="1401-1 (cylinder head)_Information.html">Information</a>'
linkset[1]+='<hr>' //Optional Separator
linkset[1]+='<a>1401-2 (Valve train)</a>'
linkset[1]+='<a href="1401-2 (valve train)_Meeting.html">Meetings</a>'
linkset[1]+='<a href="1401-2 (valve train)_Information.html">Information</a>'
linkset[1]+='<hr>' //Optional Separator
linkset[1]+='<a>1401-3 (Engine block)</a>'
linkset[1]+='<a href="1401-3 (engine block)_Information.html">Meetings</a>'
linkset[1]+='<a href="1401-3 (engine block)_Meeting.html">Information</a>'
linkset[1]+='<hr>' //Optional Separator
linkset[1]+='<a>1401-4 (Axle mechanism)</a>'
linkset[1]+='<a href="1401-4 (axle mechanism)_Meeting.html">Meetings</a>'
linkset[1]+='<a href="1401-4 (axle mechanism)_Information.html">Information</a>'
linkset[1]+='<hr>' //Optional Separator
linkset[1]+='<a>1401-5 (Piston)</a>'
linkset[1]+='<a href="1401-5 (piston)_Meeting.html">Meetings</a>'
linkset[1]+='<a href="1401-5 (piston)_Information.html">Information</a>'
linkset[1]+='<hr>' //Optional Separator
linkset[1]+='<a>1401-6 (Gear train)</a>'
linkset[1]+='<a href="1401-6 (gear train)_Meeting.html">Meetings</a>'
linkset[1]+='<a href="1401-6 (gear train)_Information.html">Information</a>'

linkset[2]='<a href="1402 (belt drive)_Meeting.html">Meetings</a>'
linkset[2]+='<a href="1402 (belt drive)_Information.html">Information</a>'

linkset[3]='<a href="1403 (flywheel)_Meeting.html">Meetings</a>'
linkset[3]+='<a href="1403 (flywheel)_Information.html">Information</a>'

linkset[4]='<a href="1404 (flywheelhousing)_Meeting.html">Meetings</a>'
linkset[4]+='<a href="1404 (flywheelhousing)_Information.html">Information</a>'

linkset[5]='<a href="1406 (lubr. system)_Meeting.html">Meetings</a>'
linkset[5]+='<a href="1406 (lubr. system)_Information.html">Information</a>'

linkset[6]='<a href="1407 (cooling system)_Meeting.html">Meetings</a>'
linkset[6]+='<a href="1407 (cooling system)_Information.html">Information</a>'

linkset[7]='<a href="1409 (in-outlet system)_Meeting.html">Meetings</a>'
linkset[7]+='<a href="1409 (in-outlet system)_Information.html">Information</a>'

linkset[8]='<a href="1410 (fuel system)_Meeting.html">Meetings</a>'
linkset[8]+='<a href="1410 (fuel system)_Information.html">Information</a>'

linkset[9]='<a href="1411 (alternatorstarter)_Meeting.html">Meetings</a>'
linkset[9]+='<a href="1411 (alternatorstarter)_Information.html">Information</a>'

linkset[10]='<a href="1412 (compressor)_Meeting.html">Meetings</a>'
linkset[10]+='<a href="1412 (compressor)_Information.html">Information</a>'

linkset[11]='<a href="1413 (steering pump)_Meeting.html">Meetings</a>'
linkset[11]+='<a href="1413 (steering pump)_Information.html">Information</a>'

linkset[12]='<a href="1414 (lifting hook)_Meeting.html">Meetings</a>'
linkset[12]+='<a href="1414 (lifting hook)_Information.html">Information</a>'

linkset[13]='<a href="1415 (airco compressor)_Meeting.html">Meetings</a>'
linkset[13]+='<a href="1415 (airco compressor)_Information.html">Information</a>'

linkset[14]='<a href="1419 (EGR system)_Meeting.html">Meetings</a>'
linkset[14]+='<a href="1419 (EGR system)_Information.html">Information</a>'

linkset[15]='<a href="1420 (fan drive)_Meeting.html">Meetings</a>'
linkset[15]+='<a href="1420 (fan drive)_Information.html">Information</a>'

linkset[16]='<a href="1429 (addon set)_Meeting.html">Meetings</a>'
linkset[16]+='<a href="1429 (addon set)_Information.html">Information</a>'

linkset[17]='<a href="1444 (wiring harness)_Meeting.html">Meetings</a>'
linkset[17]+='<a href="1444 (wiring harness)_Information.html">Information</a>'

linkset[18]='<a href="1445 (sensors electric system engine)_Meeting.html">Meetings</a>'
linkset[18]+='<a href="1445 (sensors electric system engine)_Information.html">Information</a>'

linkset[19]='<a href="Phase 1.html">Phase 1</a>'
linkset[19]+='<a href="Phase 2.html">Phase 2</a>'

linkset[20]='<a href="Perf_General performance.html">General performance</a>'
linkset[20]+='<a href="Perf_EAS.html">EAS</a>'
linkset[20]+='<a href="Perf_Software.html">Software</a>'

linkset[21]='<a href="Prjm_Status reports.html">Status reports</a>'
linkset[21]+='<a href="Prjm_Steering meetings.html">Steering meetings</a>'
linkset[21]+='<a href="Prjm_Miscellaneous.html">Miscellaneous</a>'

linkset[22]='<a target="blank" href="Partlist/20060828_PARTLIST SRX MK 1/B075293 00031003 Engine Complete SRX OHC 20060828_01.xls">Partlist SRX Mk1 (28.08.2006)</a>'
linkset[22]+='<a target="blank" href="Partlist/20061117_PARTLIST SRX MK 1.2/B076519_0000031003_002_EN-I6-15.97TC-4V-UI-485kW-(SRX-OHC)_20061117.xls">Partlist SRX Mk1.2 (17.11.2006)</a>'
////No need to edit beyond here

var ie5=document.all && !window.opera
var ns6=document.getElementById

if (ie5||ns6)
document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"></div>')

function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

function showmenu(e, which, optWidth){
if (!document.all&&!document.getElementById)
return
clearhidemenu()
menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu")
menuobj.innerHTML=which
menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth
menuobj.contentwidth=menuobj.offsetWidth
menuobj.contentheight=menuobj.offsetHeight
eventX=ie5? event.clientX : e.clientX
eventY=ie5? event.clientY : e.clientY
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.contentwidth)
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"
//same concept with the vertical position
if (bottomedge<menuobj.contentheight)
menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"
else
menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"
menuobj.style.visibility="visible"
return false
}

function contains_ns6(a, b) {
//Determines if 1 element in contained in another- by Brainjar.com
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function hidemenu(){
if (window.menuobj)
menuobj.style.visibility="hidden"
}

function dynamichide(e){
if (ie5&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}

function delayhidemenu(){
delayhide=setTimeout("hidemenu()",500)
}

function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}

if (ie5||ns6)
document.onclick=hidemenu

</script>

AND THIS IS THE BODY SECTION;
</div>

<div id="avmenu">
<h2 class="hide">Site menu:</h2>
<ul>
<li><a href="#" onMouseover="showmenu(event,linkset[22], '200px')" onMouseout="delayhidemenu()">Engine component group</a></li>
<li><a href="#" onMouseover="showmenu(event,linkset[0], '180px')" onMouseout="delayhidemenu()">1400 (Engine)</a>
<ul>
<li><a href="#" onMouseover="showmenu(event,linkset[1])" onMouseout="delayhidemenu()">1401 (Basic engine)</a></li>
<li><a href="#" onMouseover="showmenu(event,linkset[2])" onMouseout="delayhidemenu()">1402 (Belt drive)</a></li>
<li><a href="#" onMouseover="showmenu(event,linkset[3])" onMouseout="delayhidemenu()">1403 (Flywheel)</a></li>
<li><a href="#" onMouseover="showmenu(event,linkset[4])" onMouseout="delayhidemenu()">1404 (Flywheel housing)</a></li>
<li><a href="#" onMouseover="showmenu(event,linkset[5])" onMouseout="delayhidemenu()">1406 (Lubrication system)</a></li>
<li><a href="#" onMouseover="showmenu(event,linkset[6])" onMouseout="delayhidemenu()">1407 (Cooling system)</a></li>
<li><a href="#" onMouseover="showmenu(event,linkset[7])" onMouseout="delayhidemenu()">1409 (Inlet/outlet system)</a></li>
<li><a href="#" onMouseover="showmenu(event,linkset[8])" onMouseout="delayhidemenu()">1410 (Fuel system)</a></li>
<li><a href="#" onMouseover="showmenu(event,linkset[9])" onMouseout="delayhidemenu()">1411 (Alternator/starter)</a></li>
<li><a href="#" onMouseover="showmenu(event,linkset[10])" onMouseout="delayhidemenu()">1412 (Compressor)</a></li>
<li><a href="#" onMouseover="showmenu(event,linkset[11])" onMouseout="delayhidemenu()">1413 (Steering pump)</a></li>
<li><a href="#" onMouseover="showmenu(event,linkset[12])" onMouseout="delayhidemenu()">1414 (Lifting hook)</a></li>
<li><a href="#" onMouseover="showmenu(event,linkset[13])" onMouseout="delayhidemenu()">1415 (Airco compressor)</a></li>
<li><a href="#" onMouseover="showmenu(event,linkset[14])" onMouseout="delayhidemenu()">1419 (EGR system)</a></li>
<li><a href="#" onMouseover="showmenu(event,linkset[15])" onMouseout="delayhidemenu()">1420 (Fan drive)</a></li>
<li><a href="#" onMouseover="showmenu(event,linkset[16])" onMouseout="delayhidemenu()">1429 (Addon set)</a></li>
<li><a href="#" onMouseover="showmenu(event,linkset[17])" onMouseout="delayhidemenu()">1444 (Wiring harness)</a></li>
<li><a href="#" onMouseover="showmenu(event,linkset[18])" onMouseout="delayhidemenu()">1445 (Sensors electric system engine)</a></li>
</ul>

<li><a href="#" onMouseover="showmenu(event,linkset[19])" onMouseout="delayhidemenu()">Closure reports</a></li>
<li><a href="#" onMouseover="showmenu(event,linkset[20])" onMouseout="delayhidemenu()">Performance</a></li>
<li><a href="Reliability.html">Reliability</a></li>
<li><a href="#" onMouseover="showmenu(event,linkset[21])" onMouseout="delayhidemenu()">Project management</a></li>
<li><a href="Administrator.html">Administrator</a></li>
<li><a href="Competitor.html">Competitor info</a></li>
</li>
</ul>

 

[vacunita]

You can use either Server-Side Includes, or some kind of Server-side language to include them. Its really not hard.

As a suggestion apart. If your going to be designing Websites, learning HTML is a must, as well as some kind of Programming language for them.



----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[straybullet]

At the risk of setting of a storm lol, loook into [small][small]frames[/small][/small]

Let them hate - so long as they fear... Lucius Accius

 

[ca8msm]

At the risk of setting of a storm lol, loook into frames

I'm sure there won't be a "storm", but in this day and age there's not many reasons to use them and they bring more problems than solutions so I'd advise avoiding them in most cases. Also, I'd say that promoting their use when other avenues haven't been explored or you don't know the full scenario (i.e. whether SSI or server side languages aren't available) is fairly bad advice.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[MvB2]

SSI or some kind of server side language would be great but the fact is that the site is hosted on a secured company server.
One which I'm not allowed to fiddle with.

The site users are given access to a certain folder on that server which contains the complete site; html and contents (pdf's, jpegs's etc...).

So html, css and javascript is al I've got.

Somewhere else on the site I did find a FAQ that described how to add your header and menu to your CSS file.
That could work except for the javascript that makes the menu tick.

ps. html is not a problem anymore, this is I picked up quite easily, javascript continues to be gibberish to me.

 

[ca8msm]

SSI or some kind of server side language would be great but the fact is that the site is hosted on a secured company server.
One which I'm not allowed to fiddle with.

In that case, one option may be to use JavaScript and an XmlHttpRequest call to get the menu details from a seperate file.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[MvB2]

Oke,

Please show me how that would be done

 

[MvB2]

Bytheway,

I'ven been tinkering with the web page a bit and I succeeded in extracting the popupmenu script (which was in the head section of every page) and sticking it in an external .js file.
I referenced all pages to that file and all menu's seem to be working properly.

If I could only get the body part of the code (second piece of code) into an external file than I'd be happy.
The body part is the actual menu, the script merely shows a popup with additional choices when you hover over a menu item.

After the SSI remark I tried to implement that but it didn't work.
Even tutorial examples did not work.

 

[okpeery]

Maybe I am underestimating the problem but here's what I did. As I expanded my store's site and added new pages etc the menu needed to expand. I would have had to go to each page to change the menu. I think that is the same problem you are experiencing. I used BBEdit to write the code initially. I used Dreamweaver to update my menu's. I did the manage a site in DW. Then when all my files were managed I did a find and replace command. I selected the menu on one page in code view, did find and replace, and it found that code(my menu) and replaced it with my new menu. It took about 2 minutes and has been perfect for updating the menu on my site. There may be a similar command in BBEdit or other code generating programs but I found it was easy to do in code view in Dreamweaver, even though I am not a big DW fan.

 

[MvB2]

I have found a program that has nearly the same function.
It replaces text between two markers in the file with the text I input.
It works, but I wanted a more robust independant solution.
Having two files managing your menu would be a simple and clear solution.

I haven't found it yet though

 

[ChrisHunt]

OK, let's start with Javascript menus.

For a site on the internet they're a really bad idea - because search engines can't see them and some people surf with JS switched off.

If I understand your posts correctly, this isn't an internet site but a collection of pages that are only seen internally. You don't care about search engine traffic, and you can be sure everybody has JS switched on.

That being the case, you can put all this shared content into external javascript files that you call from every page. You've already done this, apparently, for the script in the <head>. For the html content, write a script that just [tt]document.write[/tt]s the html that you require, and call that instead of hard-coding the html.

So if you have

<h2>Menu</h2>
<p>Hello World</p>

replace it with

<script type="text/javascript" src="menu.js"></script>

and menu.js would be

document.write("<h2>Menu</h2>");
document.write("<p>Hello World</p>");

Note that this is a very brute-force-and-ignorance approach. There are much more elegant approaches you could take, but this should get you moving.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[MvB2]

@ChrisHunt

That was a great tip.
However it did not work.
I implemented the code (exactly) as you showed it, but it only succeeds in making the menu dissappear.
I even tried to create a simple example but that didn't work either.
Could it be a javascript thing on the corporate network??

I think I'm quite ready for the more elegant approaches!!