//Function which change the background color
function ChangeBackground(id,Color)
{	
	if (document.layers){// NS 4 et <
		document[id].style.background = Color;
	}
	if (document.all){// IE
		document.all[id].style.background = Color;
	}
	if (document.getElementById){
		document.getElementById(id).style.background = Color;
	}
}

function ChangeBackgroundAll(max,lig,Colour)
{	for (k=1; k<max;k++)
	{	ChangeBackground('SSCELLULE'+lig+'-'+k,Colour);
	}
}


<!-- Variables -->
var largeur = 689; 
var centre = true;
var top = 29; // Variable qui positionne le menu general par rapport au top
var leftMenu = 0;
var couleurMenu = "#00FF00";
var couleurMenuGen = "#FF00FF";
var couleurSeparation = "#FFF00F";

var offsetHor = 0;
var offsetVer = 0;
var openMenu = false;
var timeId;

var sousMenus = [["145","#0099FF","#BDDEEE"],["125","#33CC99","#CCFFCC"],["150","#FFCC00","#FFFFCC"],["130","#CC3366","#FFCCCC"],["139","#FF9900","#FFCC99"]];

if (document.layers){// NS 4 et <
	leftMenu = 0;
}
if (document.all){// IE
	leftMenu = 0;
}
else{
	if (document.getElementById){
		leftMenu = -8;
	}
}

<!-- Variables -->

<!-- Fonction init-->
function init(){
	initOffsets();
	ecrire(initTable(largeur,centre)+initLayers());
}

<!-- Fonction qui dessine le menu general -->
function initTable(largeur, centre){
	var tableau = "<TABLE  BORDER=\"0\"  WIDTH=\"689\" align=\"center\" HEIGHT=\"30\" CELLPADDING=\"0\" CELLSPACING=\"0\"><TR>";
	tableau += "<TD WIDTH=\"145\" ALIGN=RIGHT HEIGHT=\"30\" valign=\"top\" onmouseover=\"stopTime();hideAll();show('Layer0');\" onmouseout=\"doHide()\"><A href=\"front?id=drass/administration\" OnMouseOver=\"rubrique_1.src='images/commun/rubrique_1_on.gif'\"  OnMouseOut=\"rubrique_1.src='images/commun/rubrique_1_off.gif'\"><IMG SRC=\"images/commun/rubrique_1_off.gif\" name=\"rubrique_1\" align=\"absmiddle\" border=\"0\" OnLoad=\"tempImg=new Image(0,0); tempImg.src='images/commun/rubrique_1_on.gif'\"></A></TD>";
	tableau += "<TD WIDTH=\"125\" valign=\"top\" onmouseover=\"stopTime();hideAll();show('Layer1');\" onmouseout=\"doHide()\"><A href=\"front?id=drass/sante\" OnMouseOver=\"rubrique_2.src='images/commun/rubrique_2_on.gif'\"  OnMouseOut=\"rubrique_2.src='images/commun/rubrique_2_off.gif'\"><IMG SRC=\"images/commun/rubrique_2_off.gif\" name=\"rubrique_2\" align=\"absmiddle\" border=\"0\" OnLoad=\"tempImg=new Image(0,0); tempImg.src='images/commun/rubrique_2_on.gif'\"></A></TD>";
	tableau += "<TD WIDTH=\"150\" valign=\"top\" onmouseover=\"stopTime();hideAll();show('Layer2');\" onmouseout=\"doHide()\"><A href=\"front?id=drass/environnement\" OnMouseOver=\"rubrique_3.src='images/commun/rubrique_3_on.gif'\"  OnMouseOut=\"rubrique_3.src='images/commun/rubrique_3_off.gif'\"><IMG SRC=\"images/commun/rubrique_3_off.gif\" name=\"rubrique_3\" align=\"absmiddle\" border=\"0\" OnLoad=\"tempImg=new Image(0,0); tempImg.src='images/commun/rubrique_3_on.gif'\"></A></TD>";
	tableau += "<TD WIDTH=\"130\" valign=\"top\" onmouseover=\"stopTime();hideAll();show('Layer3');\" onmouseout=\"doHide()\"><A href=\"front?id=drass/solidarite\" OnMouseOver=\"rubrique_4.src='images/commun/rubrique_4_on.gif'\"  OnMouseOut=\"rubrique_4.src='images/commun/rubrique_4_off.gif'\"><IMG SRC=\"images/commun/rubrique_4_off.gif\" name=\"rubrique_4\" align=\"absmiddle\" border=\"0\" OnLoad=\"tempImg=new Image(0,0); tempImg.src='images/commun/rubrique_4_on.gif'\"></A></TD>";
	tableau += "<TD WIDTH=\"139\" valign=\"top\" onmouseover=\"stopTime();hideAll();show('Layer4');\" onmouseout=\"doHide()\"><A href=\"front?id=drass/politique\" OnMouseOver=\"rubrique_5.src='images/commun/rubrique_5_on.gif'\"  OnMouseOut=\"rubrique_5.src='images/commun/rubrique_5_off.gif'\"><IMG SRC=\"images/commun/rubrique_5_off.gif\" name=\"rubrique_5\" align=\"absmiddle\" border=\"0\" OnLoad=\"tempImg=new Image(0,0); tempImg.src='images/commun/rubrique_5_on.gif'\"></A></TD>";
	tableau += "</TR></TABLE>";
	return tableau;
}

<!-- Fonction qui dessine les layers -->
function initLayers(){
	


	layer = "";
	largeurTotale = 46;
	for (i=0;i<liens.length; i++)
	{
		largLayer = parseInt(sousMenus[i][0]);
		left = largeurTotale+offsetHor+leftMenu;
		
		// On dessine les layers
		if (document.layers) layer += "<layer name=\"Layer"+i+"\" top=\""+top+"px\" left=\""+left+"px\" width=\""+sousMenus[i][0]+"px\" visibility=\"hide\">";
		else layer += "<div id=\"Layer"+i+"\" style=\"position:absolute; left:"+left+"px; top:"+top+"px; width:"+sousMenus[i][0]+"px; z-index:"+(i+1)+"; visibility: hidden;\" onMouseOut=\"rubrique_"+(i+1)+".src='images/commun/rubrique_"+(i+1)+"_off.gif';hideAll();\" onMouseOver=\"rubrique_"+(i+1)+".src='images/commun/rubrique_"+(i+1)+"_on.gif';stopTime();show('Layer"+i+"');\">";
		
		// Affichage des infos
		layer += "<TABLE BGCOLOR=\"#FFFFFF\" WIDTH="+sousMenus[i][0]+" cellpadding=0 cellspacing=0><TR HEIGHT=3><TD COLSPAN=2 BGCOLOR=\""+sousMenus[i][1]+"\"><IMG SRC=Images/Commun/Pixel_transparent.gif WIDTH="+sousMenus[i][0]+" HEIGHT=3></TD></TR><TR HEIGHT=5><TD COLSPAN=2><IMG SRC=Images/Commun/Pixel_transparent.gif WIDTH="+sousMenus[i][0]+" HEIGHT=5></TD></TR>";
		
		for (j=1; j<liens[i].length;j++)
		{
			//layer += "<TR style=\"cursor:hand\" onClick=\"document.location='"+liens[i][j]+"'\" onMouseOver=\"ChangeBackground(this,'"+sousMenus[i][2]+"')\" onMouseOut=\"ChangeBackground(this,'#FFFFFF')\"><TD width=3><IMG SRC=Images/Commun/Pixel_transparent.gif WIDTH=3 HEIGHT=1></TD><TD width="+(parseInt(sousMenus[i][0])-3)+"><font ID=TexteMenu>"+libelles[i][j]+"</font></TD></TR><TR HEIGHT=5><TD COLSPAN=2><IMG SRC=Images/Commun/Pixel_transparent.gif WIDTH="+sousMenus[i][0]+" HEIGHT=5></TD></TR>";
			layer += "<TR id=\"SSCELLULE"+i+"-"+j+"\" style=\"cursor:hand\" onClick=\"document.location='"+liens[i][j]+"'\" onMouseOver=\"ChangeBackgroundAll("+liens[i].length+","+i+",'#FFFFFF');ChangeBackground('SSCELLULE"+i+"-"+j+"','"+sousMenus[i][2]+"')\" onMouseOut=\"ChangeBackground('SSCELLULE"+i+"-"+j+"','#FFFFFF')\"><TD width=3><IMG SRC=Images/Commun/Pixel_transparent.gif WIDTH=3 HEIGHT=1></TD><TD width="+(parseInt(sousMenus[i][0])-3)+"><font ID=TexteMenu>"+libelles[i][j]+"</font></TD></TR>"
			layer += "<TR HEIGHT=5><TD COLSPAN=2><IMG SRC=Images/Commun/Pixel_transparent.gif WIDTH="+sousMenus[i][0]+" HEIGHT=5></TD></TR>";
			
		}
		
		layer += "<TR><TD COLSPAN=2 BGCOLOR=\""+sousMenus[i][1]+"\"><IMG SRC=Images/Commun/Pixel_transparent.gif WIDTH="+sousMenus[i][0]+" HEIGHT=3></TD></TR></TABLE>";

		if (document.layers) layer +="</layer>";
		else layer += "</div>";
		
		largeurTotale += parseInt(sousMenus[i][0]);
	}
	return(layer);
}

<!-- fonction d'initialisation de l'offset -->
function initOffsets(){
	if (document.layers){// NS 4 et <
		if (os() == "win")offsetVer = 8;
		else offsetVer = 6;
		if (!centre){
			if (os() == "win")offsetHor = 8;
			else offsetHor = 8;
		}else{
			// Calcul du centre de la fenetre
			page_width = innerWidth;
			if (largeur>page_width){
				offsetHor = 8;
			}else{
				milieu_width = (page_width/2);
				offsetHor = milieu_width - largeur/2 - 8;
			}	
		}
	}else if (document.all){// IE
		if (os() == "win")offsetVer = 15;
		else offsetVer = 8;
		if (!centre){
			if (os() == "win")offsetHor = 10;
			else offsetHor = 8;
		}else{
			// Calcul du centre de la fenetre
			page_width = document.body.clientWidth;
			if (largeur>page_width){
				if (os() == "win")offsetHor = 10;
				else offsetHor = 8;
			}else{
				milieu_width = (page_width/2);
				offsetHor = milieu_width - largeur/2;
			}
		}
	}else if (document.getElementById){
		offsetVer = 10;
		if (!centre){
			offsetHor = 8;
		}else{
			// Calcul du centre de la fenetre
			page_width = innerWidth;
			if (largeur>page_width){
				offsetHor = 10;
			}else{
				milieu_width = (page_width/2);
				offsetHor = milieu_width - largeur/2;
			}
		}
	}
}
function initPosition(){
	initOffsets();
	largeurTotale = 46;
	for (i=0;i<liens.length; i++){
		largLayer = parseInt(sousMenus[i][0]);
		left = largeurTotale+offsetHor+leftMenu;
		id = 'Layer'+i;
		if (document.layers){// NS 4 et <
			document[id].left = left;
		}
		if (document.all){// IE
			document.all[id].style.left = left;
		}
		if (document.getElementById){
			document.getElementById(id).style.left = left;
		}
		largeurTotale += parseInt(sousMenus[i][0]);
	}
}
<!-- Fonction d'affichage d'un layer -->
function show(id){
	openMenu = true;
	if (document.layers){// NS 4 et <
		document[id].visibility = 'show';
	}
	if (document.all){// IE
		document.all[id].style.visibility = 'visible';
	}
	if (document.getElementById){
		document.getElementById(id).style.visibility = 'visible';
	}
}
<!-- Fonction de cachage de layer -->
function hide(id){
	openMenu = false;
	if (document.layers){// NS 4 et <
		document[id].visibility = 'hidden';
	}
	if (document.all){// IE
		document.all[id].style.visibility = 'hidden';
	}
	if (document.getElementById){
		document.getElementById(id).style.visibility = 'hidden';
	}
}

function doHide(){
	if(openMenu){
		timeId = setTimeout("hideAll()",500);
	}
}
function stopTime(){
	clearTimeout(timeId);
}

function hideAll(){
	time = 0;
	for (i=0;i<liens.length; i++){
		id = 'Layer'+i;
		hide(id);
	}
}


<!-- Fonction ecrire -->
function ecrire(valeur){
	if (document.all){
		//document.body.innerHTML = valeur;
		document.write(valeur);
	}else if (document.getElementById){
		document.write(valeur);
	}else if (document.layers){
		//document.open();
		document.write(valeur);
		//document.close();
	}
}

<!-- Fonction de recherche de l'os -->
function os(){
	if (navigator.platform.toLowerCase().indexOf("win") != -1){
		return "win";
	}else if (navigator.platform.toLowerCase().indexOf("Mac") != -1){
		return "mac";
	}
}