...

View Full Version : Positioning a javascript menu



Maxim
10-07-2004, 11:31 AM
How can i place a javascript menu inside a table?

I have created a js menu, but i can only seem to position it from the edge and top of the page, and not inside a table, which i require.

The problem is, that when the browser window is adjusted in size, the menu moves with the browser, thus taking the position away from its desired fixed position which would be inside the table.

can anybody help?

below is the code:

<html>
<head>
<title>help me js experts</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT LANGUAGE="JavaScript">


<!-----------------------Edition des caractèristiques du menu ----------------------------->

var largeur = 110;//Largeur du menu
var gauche = 226;//nombre de pixe de la gauche de l'écran
var top = 162;//Nombre de pixels du haut de la page
var couleur_police_cat="#4E83C4";//Couleur du texte des categories
var couleur_police_scat="#ffffff";//Couleur du texte des sous-categories
var couleur_cat="#ffffff";//Couleur de fond des categories
var couleur_scat="#366EB7";//Couleur de fond des sous-categories


var taille = 11;//Police de caractères
var police = "Arial";//Type de police



<!-----------------------Texte et lien des menus et sous menus---------------------------->

var nb_elem = 8;//Nombre de categorie dans le menu

var nb_souscat = new Array(nb_elem);//Nb_souscat contient le nombre de sous categorie pour chaque categorie

//nb_souscat[0] = 0;//Nombre de sous categorie 1
//nb_souscat[1] = 0;//Nombre de sous categorie 2
//nb_souscat[2] = 0;//Nombre de sous categorie 3
nb_souscat[3] = 7;//Nombre de sous categorie 4
//nb_souscat[4] = 0;//Nombre de sous categorie 5
//nb_souscat[5] = 0;//Nombre de sous categorie 6
//nb_souscat[6] = 0;//Nombre de sous categorie 7
//nb_souscat[7] = 0;//Nombre de sous categorie 8
//répeter aussi souvent qu'il y a de categorie...


var categorie = new Array(nb_elem);
var soustab = new Array;

var tab0 = new Array(nb_souscat[0]);
var tab1 = new Array(nb_souscat[1]);
var tab2 = new Array(nb_souscat[2]);
var tab3 = new Array(nb_souscat[3]);
var tab4 = new Array(nb_souscat[4]);
var tab5 = new Array(nb_souscat[5]);
var tab6 = new Array(nb_souscat[6]);
var tab7 = new Array(nb_souscat[7]);
//répeter aussi souvent qu'il y a de categorie...


<!-------Edition PREMIERE categorie et sous categorie------------>
categorie[0] = " &nbsp;Profile"; //Titre de la categorie

//tab0[0] = " Script|http://www.script-masters.com|_blank";//Premier sous-titre|liens|cible
//tab0[1] = " Tutoriaux|http://www.script-masters.com|_blank";//Second sous-titre|liens|cible
//tab0[2] = " Liens|http://www.script-masters.com|_blank";//Troisième sous-titre|liens|cible


<!-------Edition SECONDE categorie et sous categorie------------>
categorie[1] = " &nbsp;Products";//Titre de la categorie

tab1[0] = " Liens|http://www.script-masters.com|_blank";//Premier sous-titre|liens|cible
tab1[1] = " Forums|http://www.script-masters.com|_blank";//Second sous-titre|liens|cible
tab1[2] = " Livres|http://www.script-masters.com|_blank"; //Troisième sous-titre|liens|cible


<!-------Edition TROISIEME categorie et sous categorie------------>
categorie[2] = " &nbsp;Markets";//Titre de la categorie

tab2[0] = " Bases|http://www.script-masters.com|_blank";//Premier sous-titre|liens|cible
tab2[1] = " Livres|http://www.script-masters.com|_blank";//Second sous-titre|liens|cible


<!-------Edition QUATRIEME categorie et sous categorie------------>
categorie[3] = " &nbsp;Accreditation"; //Titre de la categorie

tab3[0] = " &nbsp;BSI ISO9002-17025|";//Premier sous-titre|liens|cible
tab3[1] = " &nbsp;UKAS|";//Second sous-titre|liens|cible
tab3[2] = " &nbsp;HACCUP|";//Troisième sous-titre|liens|cible
tab3[3] = " &nbsp;GMP|";
tab3[4] = " &nbsp;PHARMACOPIA|";
tab3[5] = " &nbsp;IIP|";
tab3[6] = " &nbsp;HOME OFFICE|";

categorie[4] = " &nbsp;Cust. Service";

categorie[5] = " &nbsp;Analytical";

categorie[6] = " &nbsp;Training";

categorie[7] = " &nbsp;Prod. Pricelist";

soustab[0] = tab0;
soustab[1] = tab1;
soustab[2] = tab2;
soustab[3] = tab3;
//répeter aussi souvent qu'il y a de categorie...


<!------------------------------------Fonctions-------------------------------------------->
<!------------------------------NE PLUS RIEN MODIFIER-------------------------------------->

var conf = -1;
function Init(){
var hauteur = top;
for(i=1;i<=nb_elem;i++){
document.getElementById("menu"+i+"").style.top = hauteur;
hauteur = hauteur + 17;
}
}

function voir(z){
if(conf==z){
document.getElementById("sousmenu"+z+"").style.visibility = 'hidden';
Init();
conf=conf+nb_elem;
}else{
conf=z;

//Calcul de la hauteur dont doit se baisser le menu
haut=0;
var haut = 15*nb_souscat[z-1]+z*18+top;


//On retracte tous les éléments
for(i=1;i<=nb_elem;i++){
document.getElementById("sousmenu"+i+"").style.visibility = 'hidden';
}

//on les remets tous à leur place
Init();

//on cale le sous menu sous la categorie
document.getElementById("sousmenu"+z+"").style.top = 16;
dec = haut;

//On peut alors baisser tous les autre menus
for(i=z+1;i<=nb_elem;i++){

document.getElementById("menu"+i+"").style.top = dec;
dec=dec+18;
}

//Enfin, on rend le menu visible
document.getElementById("sousmenu"+z+"").style.height = 15*nb_souscat[z-1];
document.getElementById("sousmenu"+z+"").style.visibility = 'visible';

}

}

function affiche(){

//feuille de style
document.write('<style>');
document.write('div.menu{visibility:visible; border-width: 1px; border-style: solid; border-color: #000000;background-color: '+couleur_cat+'}');
document.write('div.sousmenu{position:absolute; left:-1; height:20; visibility:hidden; width:'+ largeur +'; border-width: 1px; border-style: solid; border-color: #000000;background-color: '+couleur_scat+'}');
document.write('a.menu{font-family: '+ police +'; color: '+couleur_police_cat+'; font-size: '+taille+'px; font-weight:bold; text-decoration: none;}');
document.write('a.smenu{font-family: '+ police +'; color: '+couleur_police_scat+'; font-size: '+taille+'px; font-weight:bold; text-decoration: none;}');
document.write('</style>');
document.write('<div>');

for(i=0;i<nb_elem;i++){
boucle = nb_souscat[i];


document.write('<div id="menu'+(i+1)+'" style="position:absolute; left:'+ gauche +'px; width:'+ largeur +'px;" class="menu">');
document.write('<a href="#" class="menu" onClick="javascript:voir('+(i+1)+')">'+categorie[i]+'</a>');

document.write('<div width="'+ largeur +'" id="sousmenu'+(i+1)+'" class="sousmenu">');


for(z=0;z<boucle;z++){
elem=soustab[i][z].split("|");
document.write('<div height="15"><a href="'+elem[1]+'" target="'+elem[2]+'" class="smenu">'+elem[0]+'</a></div>');
}


document.write('</div>');
document.write('</div>');

}

document.write('</div>');

document.onLoad=Init();
}
</script>
</head>

<body>
<table width="30%" border="0" align="center">
<tr>
<td colspan="2"><img src="bannerv2.gif" width="701" height="130"></td>
</tr>
<tr>
<td width="19%" height="518" valign="top" background="navbg.gif">
<script language="Javascript">
affiche();
</script>
</td>
<td width="81%" background="contentbg2.gif">&nbsp;</td>
</tr>
</table>
</body>
</html>


thanks.

ArcticFox
10-13-2004, 12:05 AM
I'm not quite sure where the problem is - the French text in your code is throwing me way off. ;)

I would suggest changing where you see
position:absolute

and change them one at a time to
position:relative.


Absolute is placing the menu in relation to the actual page.
Relative will place it in relation to whatever it's sitting in (like TABLEs).

Re: Willy Duitt's suggestion (http://www.codingforums.com/showthread.php?p=240175#post240284)
:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum