Menu Javascript et frame (problème d'affichage)

Salut,
Je viens d'integrer un menu dans mon site. J'utilise des frames dans mon site pour quel le menu soit chargé une seule fois.
Le problème est que lors de l'affichage du menu, les parties dépassant la hauteur de la frame de haut ne s'affichent pas. Comment faire pour que les sous menus ne dependaent pas de cette frame (deviennent genre pop up)

Voici le code:

<script language="JavaScript">

var IE=navigator.appName=='Microsoft Internet Explorer';
var NS=navigator.appName=='Netscape';
var Panels=new Array();
var Layers=new Array();
var Menus=new Array();
function Menu(caption, left, top, width, heigh){
this.Index=Menus.length;
Menus[this.Index]=this;
this.Layer=new Layer('<table border=0 cellpadding=0 cellspacing=0><tr><td bgcolor=#9933FF><table border=0 cellpadding=1 height=' + heigh + ' cellspacing=1 width=' + width + '><tr><td bgcolor=#9933FF align=center><a class=MnuCaption href=# onMouseOver="Menus[' + this.Index + '].Click();">&nbsp;' + caption + '&nbsp;</a></td></tr></table></td></tr></table>', left, top);
this.Panel=new Panel(left, top + this.Layer.Height());
this.Click=function(){
if(this.Panel.visible)
this.Panel.Hide();
else
this.Panel.Show();
}

this.Build=function(){
this.Panel.Build();
}
}

function Panel(left, top, parent, item){
this.parent=parent;
this.Index=Panels.length;
this.Item=item;
this.Items=new Array();
this.Panels=new Array();
this.left=left;
this.top=top;
this.visible=false;
Panels[this.Index]=this;
this.AddItem=function(caption, url){
if(url==undefined){
var Index=this.Panels.length;
this.Panels[Index]=new Panel(0, 0, this, this.Items.length);
this.Items[this.Items.length]=new Array(caption + '&nbsp;<b>&raquo;</b>', 'href=# onMouseOver="Panels[' + this.Panels[Index].Index + '].Show();"');
}
else{
this.Items[this.Items.length]=new Array(caption, 'href="' + url + '" target="DEFAUT"');
}
}

this.AddItem1=function(caption, url){
if(url==undefined){
var Index=this.Panels.length;
this.Panels[Index]=new Panel(0, 0, this, this.Items.length);
this.Items[this.Items.length]=new Array(caption + '&nbsp;<b>&raquo;</b>', 'href=# onMouseOver="Panels[' + this.Panels[Index].Index + '].Show();"');
}
else{
this.Items[this.Items.length]=new Array(caption, 'href="' + url + '"');
}
}



this.Build=function(){
var tag='<table border=0 cellpadding=0 cellspacing=0><tr><td bgcolor=black><table border=0 cellpadding=0 cellspacing=1><tr><td bgcolor=white><table border=0 cellpadding=0 cellspacing=1><tr><td bgcolor=#EBEBEB>';
for(var i=0; i < this.Items.length; i++)tag+='<a class=MnuItem ' + this.Items[1] + '>&nbsp;' + this.Items[i][0] + '</a><br>';
tag+='</td></tr></table></td></tr></table></td></tr></table>';
this.Layer=new Layer(tag, this.left, this.top);
this.Layer.Hide();
for(var i=0; i < this.Panels.length; i++)this.Panels[i].Build();
}

this.Show=function(){
for(var i=0; i < Panels.length; i++)Panels[i].Hide();
if(this.parent!=undefined){
this.Layer.Move(this.parent.Layer.Left() + this.parent.Layer.Width(), this.parent.Layer.Top() + (this.Layer.Height() / this.Items.length) * this.Item);
this.parent.Show();
}
this.Layer.Show();
this.visible=this.Layer.visible;
}

this.Hide=function(){
this.Layer.Hide();
for(var i=0; i < this.Panels.length; i++)this.Panels[i].Hide();
this.visible=this.Layer.visible;
}
}

function Layer(tag, left, top){
this.Index=Layers.length;
Layers[this.Index]=this;
this.visible=true;
this.Show=function(){
if(IE)this.Object.style.visibility='visible';
else if(NS)this.Object.visibility='show';
this.visible=true;
}
this.Hide=function(){
if(IE)this.Object.style.visibility='hidden';
else if(NS)this.Object.visibility='hide';
this.visible=false;
}
this.Width=function(){
if(IE)return this.Object.offsetWidth;
else if(NS)return this.Object.clip.width;
}
this.Height=function(){
if(IE)return this.Object.offsetHeight;
else if(NS)return this.Object.clip.height;
}
this.Top=function(){
if(IE)return parseInt(this.Object.style.top);
else if(NS)return this.Object.top;
}
this.Left=function(){
if(IE)return parseInt(this.Object.style.left);
else if(NS)return this.Object.left;
}
this.Move=function(left, top){
if(IE){
this.Object.style.left=left;
this.Object.style.top=top;
}
else if(NS){this.Object.left=left;this.Object.top=top;}
}
if(IE){
document.write('<div id=lay' + this.Index + ' style="position:absolute;left:' + left + 'px;top:' + top + 'px;">' + tag + '</div>');
this.Object=document.all['lay' + this.Index];
}
else if(NS){
document.write('<layer id=lay' + this.Index + ' left=' + left + ' top=' + top + '>' + tag + '</layer>');
this.Object=document.layers['lay' + this.Index];
}
}
</script>
<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<title>Menu</title>
<SCRIPT language="Javascript" src="../../common/js/print.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" src="../../common/js/menu.js"></SCRIPT>
<style type=text/css>
A.MnuCaption{font-family:"Times New Roman", Times, serif;text-decoration:blink;color:#FFFFFF;font-size:12pt; text-align:center;}
A.MnuCaption:HOVER{border-style:none;border-width:0px;}
A.MnuItem{font-family:"Times New Roman", Times, serif;text-decoration:blink;color:black;font-size:12pt; text-align:center;}
A.MnuItem:HOVER{background-color:darkblue;color:white;}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>

<BODY>
<%
PositionLeft=0
PositionTop=0
%>
<script language=JavaScript>
var Menu3=new Menu('Menu', " <%=PositionLeft%> ", " <%=PositionTop %>", 80, 35);
Menu3.Panel.AddItem('Page2','page2.asp');
Menu3.Panel.AddItem('Page3','page3.asp');
Menu3.Panel.AddItem('Page4','page4.asp');
Menu3.Panel.AddItem('Page5','page5.asp');
Menu3.Build();
</script>

<table cellspacing="0" width="1024">
<tr height="35" bgcolor="#0070B8">
<td width="144" height="35" bgcolor="#9933FF" >&nbsp;</td>
</tr>
</table>

<table cellspacing="0" width="1024">
<tr height="35" bgcolor="#FFAD0C">
<td width="144" height="35" bgcolor="#9900FF" >&nbsp;</td>
</tr>
</table>
</body>

</html>




Merci d'avance[/i][/i][/i][/i]

oulala...

euh bonjour !

Ben là, tu les cumules...
... des frames, des tables pour la mise en page, un menu en JS intrusif, des envies de popup... Il y a tout ce qu'il faut pour être sûr d'être inaccessible.

Bon, première chose à voir, ceci :
Les frames (cadres) : à méditer...

Pour le "remplacement", c'est ici :
Inclure un fichier dans un autre, grâce à CSS et PHP

Pour se passer des tables, c'est par là :
Faire une mise en page sans tableaux

Après, on pourra revenir sur ton menu.
Modifié par koala64 (14 Aug 2006 - 10:01)

Merci pour les doc. Le fait est qu'on me demande de remplacer un menu en java qui fonctionnen trés bien mais nécessite l'installation du JVM (pas évient pour les utilisateur connécté en bas débit). Le site repose sur des frames et si je dois enlever les frames, je pense qu'il faut refaire le site. es ce qu'il y aurait une solution pour en remédier?

Comme vous povez le constater, les sous menu ne dépassentp pas la frame du bas. C'est ça mon problème. Je dois trouver une solution pour qu'ils soient visibles même dans la frame du bas.
Merci

Les frames, c'est comme plusieurs fenêtres accrochées les unes aux autres. En gros, tu es en train de demander de faire sortir ton menu d'une fenêtre pour passer dans une autre, ce qui est impossible.

a écrit :
Le site repose sur des frames et si je dois enlever les frames, je pense qu'il faut refaire le site.

Je ne te le cache pas... oui, c'est ce que tu as de mieux à faire.

Je te précise seulement que dans cette optique, nous sommes en mesure de te venir en aide mais c'est vrai qu'il y a du boulot.

merci comme même
Je vais prendre vos conseils en considérations.

Une solution est d'ouvrir une fenêtre indépendante menu à partir d'un bouton ou d'un lien menu. Cette fenêtre indépendante contiendrai le menu qui sera alors affiché en entier. Reste à gérer les fenêtres.

Certes mais cette méthode n'est pas vraiment ce qu'on fait de mieux. Dans ce cas, on incite mms à conserver ses frames, ce qui, il faut bien le dire, va rendre son site totalement obsolète et inaccessible avant même sa sortie. Par ailleurs, générer une nouvelle fenêtre n'est pas forcémment désirée par le visiteur. Disons qu'il vaut mieux laisser le choix à ce dernier, c'est préférable.

Les frames tentent de nombreux débutants du fait qu'elles "simplifient" dans un premier temps leur travail mais çà nuit fortement à la navigation du visiteur... et lorsque le développeur se rend compte des problèmes de son application, (navigation, référencement, impression, etc...) c'est malheureusement trop tard. Comme on dit toujours, pour arrêter plus facilement, ne commencez pas...

Bref, on pourrait en parler longtemps vu la foule de problème que çà génère donc autant éviter purement et simplement de s'en servir en ne s'orientant pas sur cette solution.

Bon, Etant donnees que les frames causent des problemes, je me suis penche sur le fait d'integrer le menu dans toutes les pages l'utilisant. Mais, d'apres ce que j'ai lu, cette pratique genere aussi des problemes (c'est ce qui se dise dans plusieurs forums). Par ailleurs, j'ai remarque la presence de la propriete "allowtransparency" dans la balise frame. Je me demande si je peux mettre la frame du bas comme transparente par rapport a celle de haut.

Si tu t'orientes là-dessus, çà ne posera pas de problèmes.

Merci pour cette idée. Là, vous me sauvez la vie .Bon, je vais m'appuyer sur cete idée. Merci pour tout.

Aprés un journée d'integration du menu dans toutes les pages, le travail me semblait encore plus pénible car cette methode m'a créer des problèmes tel que les erreurs de déeclaration des variables existantes dans deux pages.En plus tout ne foncionnait pas correctement.

Pour mon problème, J'ai utilisé une autre solution : j'ai crée un page index qui fait appel au menu et contient un iframe où se charge le cotenu et ça fonctionne.
Merci de m'avoir aider pour résoudre mon problème.

Re-salut,
La solution que j'ai cité juste avant fonctionne bien a part un tout petit problème (enfin, ça dépend si ça peut se résoudre ). Comme je viens de le dire, j'ai un problème : Ce menu s'affiche maintenant mais en arrière plan. Je m'explique : tout va bien sauf quand il y a des controles telque une liste déroulante ou par exemple u ne animation flash juste en dessous du menu. Là, le menu s'affiche mais juste dérrière les controles.
Merci d'avance.