Problème menu dynamique
Résolu
iutval
Messages postés
8
Date d'inscription
mercredi 23 mars 2005
Statut
Membre
Dernière intervention
11 mai 2007
-
11 avril 2005 à 11:33
GhislainLavoie Messages postés 289 Date d'inscription vendredi 11 mars 2005 Statut Membre Dernière intervention 3 avril 2008 - 15 avril 2005 à 00:13
GhislainLavoie Messages postés 289 Date d'inscription vendredi 11 mars 2005 Statut Membre Dernière intervention 3 avril 2008 - 15 avril 2005 à 00:13
A voir également:
- Problème menu dynamique
- Javascript menu déroulant dynamique - Forum Javascript / DHTML
- Menu php - Forum PHP
- Php variable dynamique ✓ - Forum PHP
- Template site web dynamique php - Conseils pratiques -PHP
- Menu et sous menu ✓ - Forum PHP
4 réponses
GhislainLavoie
Messages postés
289
Date d'inscription
vendredi 11 mars 2005
Statut
Membre
Dernière intervention
3 avril 2008
3
12 avril 2005 à 03:56
12 avril 2005 à 03:56
Salut!
J'ai fait les modifs nécessaires pour faire afficher les sous-menus.
//***************************************************************//
// ******************* Paramètres du menu ******************** //
//***************************************************************//
//********* Paramètre du menu principal *********//
Color0M
= '#FFFFFF' // Couleur du texte
Color1M
= '#
6699FF' // Couleur Arrière
Color2M
= '#
9966FF' // Couleur Arrière Surbrillance
Color3M
= '#FFFFFF' // Couleur Bordure ????
PosY
=
10 // Distance entre le haut de l'écran et le menu
LargeurM
=
80 // Pourcentage de l'écran qu'occupera le menu
HauteurM
=
30 // Hauteur
AlignM
= 'center' // 'center','right','left'
FontM
= 'Verdana' // Police
SizeM
=
13 // Taille de la Police
WeightM
= 'bold' // Epaisseur de la Police
CursorM
= '
default' // Curseur-> default,hand...
// Calcul de la largeur du menu en fonction de la résolution
// var largeurTotale = screen.width;
// var LargeurM = (largeurTotale / 7.8);
//*********** Tableau des rubriques **********//
menu
=
new Array
i
=0
menu
[i
++]='Informations'; menu
[i
++]='#'
menu
[i
++]='Rechercher'; menu
[i
++]='#'
menu
[i
++]='Reserver'; menu
[i
++]='#'
menu
[i
++]='Coup de coeur'; menu
[i
++]='http
: //www.google.fr'
menu
[i
++] ='Séjours thématiques'; menu
[i
++]= '#'
menu
[i
++]='Liens'; menu
[i
++]='#'
menu
[i
++]='Nouveautés'; menu
[i
++]='#'
//************ Sous-Menus ************//
Color0S
= '#FFFFFF' //Couleur du texte
Color1S
= '#
6699FF' //Couleur Arrière
Color2S
= '#
9966FF' //Couleur Arrière Surbrillance
Color3S
= '#FFFFFF' //Couleur Bordure
LargeurS
=
150 //Largeur
HauteurS
=
20 //Hauteur
AlignS
= 'center' //'center','right','left'
FontS
= 'Verdana' //Police
SizeS
=
10 //Taille de la Police
WeightS
= 'bold' //Epaisseur de la Police
FonduS
=
1 //1:Fondu, 0:aucun
CursorS
= '
default' //Curseur-> default,hand...
// Tableau des menus
k
=-1; zlien
=new Array
// Chaque case du tableau zclien est composé d'un tableau contenant les sous-menus
i
=0;
zlien
[++k
]=new Array
zlien
[k
][i
++]='Label'; zlien
[k
][i
++]='label
.html'
zlien
[k
][i
++]='La Drôme'; zlien
[k
][i
++]='drome
.html'
zlien
[k
][i
++]='Documentation'; zlien
[k
][i
++]='formulaire
.html'
i
=0;
zlien
[++k
]=new Array
zlien
[k
][i
++]='Rechercher les locations'; zlien
[k
][i
++]='rechercher_essai
.php3'
zlien
[k
][i
++]='Rechercher les chambres dhôtes'; zlien
[k
][i
++]='recherche_chambre
.php3'
i
=0;
zlien
[++k
]=new Array
zlien
[k
][i
++]='avec la Centrale de Reservation'; zlien
[k
][i
++]='http
: //www.itea1.com/Gestheb/date_resa.php?dpt =26&type= G&PHPSESSID=3dcbc4bd822cb1b5606abc154d353c29'
zlien
[k
][i
++]='avec Drôme
-Dispo'; zlien
[k
][i
++]='http
: //clevacances26.for-system.com/index.aspx'
//***************************************************************//
// ************* Création et affichage du menu *************** //
//***************************************************************//
if(document
.getElementById
)
{
document
.write
('
<style
>'
)
document
.write
('
.ejmenu
{background
:'
+Color1M
+';text
-align
:'
+AlignM
+';font
:'
+WeightM
+' '
+SizeM
+' '
+FontM
+';color
:'
+Color0M
+';text
-decoration
:none;cursor
:'
+CursorM
+'
}'
)
document
.write
('
.ejsmenu
{background
:'
+Color1S
+';text
-align
:'
+AlignS
+';font
:'
+WeightS
+' '
+SizeS
+' '
+FontS
+';color
:'
+Color0S
+';text
-decoration
:none;cursor
:'
+CursorS
+'
}'
)
document
.write
('
</style
>'
)
function fadeIn
(obj
)
{
obj
.style
.filter
="blendTrans(duration= 1)" //blendTrans: effet de fondu, duration: la durée de l'effet
if(obj
.filters
.blendTrans
.status
!=1)
{
obj
.filters
.blendTrans
.Apply
()
obj
.style
.visibility
="visible"
obj
.filters
.blendTrans
.Play
()
}
}
//document.onclick = function() // Fonction qui efface les sous menus quand on clic
//{ // n'importe où dans la fenetre, et même sur un menu
// Ele_SousMenu.visibility="hidden"
//}
function pop
(msg
,pos
)
{
Ele_SousMenu
.visibility
=
"hidden" // on efface les sous menus quand on passe la souris sur une autre rubrique
//Ele_SousMenu.top = document.body.scrollTop + PosY + HauteurM //on décale les sous menus
// Création des sous menu (en ligne)
content
="+Color3S
+\" WIDTH=\"+ LargeurM
+
\"%\"
+\">----
<TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0>----
"
for(pass
=
0; pass
< msg
.length; pass
+=
2)
content
+=", +msg
[pass
+1]+\"\\"' onMouseOver=\\"this.style.background='\"+Color2S
+\"'\\" onMouseOut=\\"this.style.background='\"+Color1S
+\"'\\" HEIGHT=\"+HauteurS
+
\"WIDTH = \"
+ LargeurM
/
(msg
.length
/2)
+
\"%\"
+\" CLASS=ejsmenu>\"+msg
[pass
]+\"</TD>\"
//document.write('
</TD></TR></TABLE>')
document
.getElementById
("SousMenu").innerHTML
= content
+"</TR></TABLE></TD></TR></TABLE>"
fadeIn
(SousMenu
); // affichage des sous menus avec effet de fondu
}
// z-index défini le plan sur lequel placé l'objet. Plus la valeur est grande,
// plus l'oobjet se rapproche du premier plan
document
.write
('
<TABLE ID
=MenuPrinc BORDER
=0 CELLPADDING
=0 CELLSPACING
=0 BGCOLOR
='
+Color3M
+' WIDTH
='
+ LargeurM
+'
%'
+' HEIGHT
='
+HauteurM
+'
><TR
><TD
><TABLE CELLPADING
=0 CELLSPACING
=1 BORDER
=0 WIDTH
=100% HEIGHT
=100%><tr
>'
)
Ele_MenuPrinc
= document
.getElementById
('MenuPrinc'
).style
// boucle qui créé les rubriques définies dans le tableau menu.
// On créé les sous rubriques uniquement (avec l'appel de la fonction pop) sur onMouseOver et pas avant
for
(pass
=
0; pass
< menu
.length; pass
+=
2)
document
.write
("<TD WIDTH="+ LargeurM
/
(menu
.length
/2)
+
"%"
+" onMouseDown='location.href=""+menu
[pass
+1]+"" ;location.target="principale"' onMouseOver='this.style.background=""+Color2M
+"";pop(zlien["+pass
+"],this.offsetLeft)' onMouseOut='this.style.background=""+Color1M
+""' CLASS=ejmenu>"+menu
[pass
]+"</TD>");
document
.write
('
</TR
></TABLE
></TD
></TR
><tr
><td
></td
></tr
></TABLE
>'
)
Ele_MenuPrinc
.top
= document
.body
.scrollTop
+PosY // Positionnement du menu
Ele_SousMenu
= document
.getElementById
('SousMenu'
).style
A+, Ghislain
J'ai fait les modifs nécessaires pour faire afficher les sous-menus.
//***************************************************************//
// ******************* Paramètres du menu ******************** //
//***************************************************************//
//********* Paramètre du menu principal *********//
Color0M
= '#FFFFFF' // Couleur du texte
Color1M
= '#
6699FF' // Couleur Arrière
Color2M
= '#
9966FF' // Couleur Arrière Surbrillance
Color3M
= '#FFFFFF' // Couleur Bordure ????
PosY
=
10 // Distance entre le haut de l'écran et le menu
LargeurM
=
80 // Pourcentage de l'écran qu'occupera le menu
HauteurM
=
30 // Hauteur
AlignM
= 'center' // 'center','right','left'
FontM
= 'Verdana' // Police
SizeM
=
13 // Taille de la Police
WeightM
= 'bold' // Epaisseur de la Police
CursorM
= '
default' // Curseur-> default,hand...
// Calcul de la largeur du menu en fonction de la résolution
// var largeurTotale = screen.width;
// var LargeurM = (largeurTotale / 7.8);
//*********** Tableau des rubriques **********//
menu
=
new Array
i
=0
menu
[i
++]='Informations'; menu
[i
++]='#'
menu
[i
++]='Rechercher'; menu
[i
++]='#'
menu
[i
++]='Reserver'; menu
[i
++]='#'
menu
[i
++]='Coup de coeur'; menu
[i
++]='http
: //www.google.fr'
menu
[i
++] ='Séjours thématiques'; menu
[i
++]= '#'
menu
[i
++]='Liens'; menu
[i
++]='#'
menu
[i
++]='Nouveautés'; menu
[i
++]='#'
//************ Sous-Menus ************//
Color0S
= '#FFFFFF' //Couleur du texte
Color1S
= '#
6699FF' //Couleur Arrière
Color2S
= '#
9966FF' //Couleur Arrière Surbrillance
Color3S
= '#FFFFFF' //Couleur Bordure
LargeurS
=
150 //Largeur
HauteurS
=
20 //Hauteur
AlignS
= 'center' //'center','right','left'
FontS
= 'Verdana' //Police
SizeS
=
10 //Taille de la Police
WeightS
= 'bold' //Epaisseur de la Police
FonduS
=
1 //1:Fondu, 0:aucun
CursorS
= '
default' //Curseur-> default,hand...
// Tableau des menus
k
=-1; zlien
=new Array
// Chaque case du tableau zclien est composé d'un tableau contenant les sous-menus
i
=0;
zlien
[++k
]=new Array
zlien
[k
][i
++]='Label'; zlien
[k
][i
++]='label
.html'
zlien
[k
][i
++]='La Drôme'; zlien
[k
][i
++]='drome
.html'
zlien
[k
][i
++]='Documentation'; zlien
[k
][i
++]='formulaire
.html'
i
=0;
zlien
[++k
]=new Array
zlien
[k
][i
++]='Rechercher les locations'; zlien
[k
][i
++]='rechercher_essai
.php3'
zlien
[k
][i
++]='Rechercher les chambres dhôtes'; zlien
[k
][i
++]='recherche_chambre
.php3'
i
=0;
zlien
[++k
]=new Array
zlien
[k
][i
++]='avec la Centrale de Reservation'; zlien
[k
][i
++]='http
: //www.itea1.com/Gestheb/date_resa.php?dpt =26&type= G&PHPSESSID=3dcbc4bd822cb1b5606abc154d353c29'
zlien
[k
][i
++]='avec Drôme
-Dispo'; zlien
[k
][i
++]='http
: //clevacances26.for-system.com/index.aspx'
//***************************************************************//
// ************* Création et affichage du menu *************** //
//***************************************************************//
if(document
.getElementById
)
{
document
.write
('
<style
>'
)
document
.write
('
.ejmenu
{background
:'
+Color1M
+';text
-align
:'
+AlignM
+';font
:'
+WeightM
+' '
+SizeM
+' '
+FontM
+';color
:'
+Color0M
+';text
-decoration
:none;cursor
:'
+CursorM
+'
}'
)
document
.write
('
.ejsmenu
{background
:'
+Color1S
+';text
-align
:'
+AlignS
+';font
:'
+WeightS
+' '
+SizeS
+' '
+FontS
+';color
:'
+Color0S
+';text
-decoration
:none;cursor
:'
+CursorS
+'
}'
)
document
.write
('
</style
>'
)
function fadeIn
(obj
)
{
obj
.style
.filter
="blendTrans(duration= 1)" //blendTrans: effet de fondu, duration: la durée de l'effet
if(obj
.filters
.blendTrans
.status
!=1)
{
obj
.filters
.blendTrans
.Apply
()
obj
.style
.visibility
="visible"
obj
.filters
.blendTrans
.Play
()
}
}
//document.onclick = function() // Fonction qui efface les sous menus quand on clic
//{ // n'importe où dans la fenetre, et même sur un menu
// Ele_SousMenu.visibility="hidden"
//}
function pop
(msg
,pos
)
{
Ele_SousMenu
.visibility
=
"hidden" // on efface les sous menus quand on passe la souris sur une autre rubrique
//Ele_SousMenu.top = document.body.scrollTop + PosY + HauteurM //on décale les sous menus
// Création des sous menu (en ligne)
content
="+Color3S
+\" WIDTH=\"+ LargeurM
+
\"%\"
+\">----
<TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0>----
"
for(pass
=
0; pass
< msg
.length; pass
+=
2)
content
+=", +msg
[pass
+1]+\"\\"' onMouseOver=\\"this.style.background='\"+Color2S
+\"'\\" onMouseOut=\\"this.style.background='\"+Color1S
+\"'\\" HEIGHT=\"+HauteurS
+
\"WIDTH = \"
+ LargeurM
/
(msg
.length
/2)
+
\"%\"
+\" CLASS=ejsmenu>\"+msg
[pass
]+\"</TD>\"
//document.write('
</TD></TR></TABLE>')
document
.getElementById
("SousMenu").innerHTML
= content
+"</TR></TABLE></TD></TR></TABLE>"
fadeIn
(SousMenu
); // affichage des sous menus avec effet de fondu
}
// z-index défini le plan sur lequel placé l'objet. Plus la valeur est grande,
// plus l'oobjet se rapproche du premier plan
document
.write
('
<TABLE ID
=MenuPrinc BORDER
=0 CELLPADDING
=0 CELLSPACING
=0 BGCOLOR
='
+Color3M
+' WIDTH
='
+ LargeurM
+'
%'
+' HEIGHT
='
+HauteurM
+'
><TR
><TD
><TABLE CELLPADING
=0 CELLSPACING
=1 BORDER
=0 WIDTH
=100% HEIGHT
=100%><tr
>'
)
Ele_MenuPrinc
= document
.getElementById
('MenuPrinc'
).style
// boucle qui créé les rubriques définies dans le tableau menu.
// On créé les sous rubriques uniquement (avec l'appel de la fonction pop) sur onMouseOver et pas avant
for
(pass
=
0; pass
< menu
.length; pass
+=
2)
document
.write
("<TD WIDTH="+ LargeurM
/
(menu
.length
/2)
+
"%"
+" onMouseDown='location.href=""+menu
[pass
+1]+"" ;location.target="principale"' onMouseOver='this.style.background=""+Color2M
+"";pop(zlien["+pass
+"],this.offsetLeft)' onMouseOut='this.style.background=""+Color1M
+""' CLASS=ejmenu>"+menu
[pass
]+"</TD>");
document
.write
('
</TR
></TABLE
></TD
></TR
><tr
><td
></td
></tr
></TABLE
>'
)
Ele_MenuPrinc
.top
= document
.body
.scrollTop
+PosY // Positionnement du menu
Ele_SousMenu
= document
.getElementById
('SousMenu'
).style
A+, Ghislain
iutval
Messages postés
8
Date d'inscription
mercredi 23 mars 2005
Statut
Membre
Dernière intervention
11 mai 2007
13 avril 2005 à 09:25
13 avril 2005 à 09:25
Merci,
et pour finir une petite précision: apparement l'attribut target n'existe pas en javascript donc location.target="principale"' ne sert à rien. Comment je pourrais faire pour indiquer le nom de la frame dans lequel je veux ouvrir le lien ?
et pour finir une petite précision: apparement l'attribut target n'existe pas en javascript donc location.target="principale"' ne sert à rien. Comment je pourrais faire pour indiquer le nom de la frame dans lequel je veux ouvrir le lien ?
iutval
Messages postés
8
Date d'inscription
mercredi 23 mars 2005
Statut
Membre
Dernière intervention
11 mai 2007
13 avril 2005 à 09:40
13 avril 2005 à 09:40
c'est bon j'ai trouvé: parent.principale.location=
Merci encore de passer tes nuits pour m'aider
Merci encore de passer tes nuits pour m'aider
GhislainLavoie
Messages postés
289
Date d'inscription
vendredi 11 mars 2005
Statut
Membre
Dernière intervention
3 avril 2008
3
15 avril 2005 à 00:13
15 avril 2005 à 00:13
Salut... test nuit??? Je suis Canadien et a 4 heures du matin chez vous, il est 22:00 h dans l'est du Canada.
C'est plutôt mes soirée ;-)
A+
C'est plutôt mes soirée ;-)
A+
