Explications de exmplmenu_var.js
file.
Une première description du fichier,
suivie d'une explication plus détaillée de chaque variable et
de la structure du menu.
Les items en rouge appartiennent à la syntaxe
Javascript, ils sont sensibles à toute modification. Var
génèrera une erreur , VAR aussi.
Les guillemets sont indispensables même s'il n'y a aucun texte. (un texte vide
n'a pas la même signification que pas de texte du tout)
Les items en noir appartiennent au script du menu et ne doivent pas être
changés ni effacés.
Les items en bleu peuvent être modifiés. Ils permettent
de contrôler l'apparence des menus.
|
var NoOffFirstLineMenus=5; |
var LowBgColor="red"; |
var HighBgColor="lightblue"; |
var FontLowColor="yellow"; |
var FontHighColor="blue"; |
var BorderColor="yellow"; |
var BorderWidth=1; |
var BorderBtwnElmnts=1; |
var FontFamily="comic sans ms,technical,arial"; |
var FontSize=9; |
var FontBold=1; |
var FontItalic=0; |
var MenuTextCentered=1; |
var MenuCentered="center"; |
var MenuVerticalCentered="center"; |
var ChildOverlap=.1; |
var ChildVerticalOverlap=.1; |
var LeftPadding=2; |
var TopPadding=2; |
var StartTop=0; |
var StartLeft=200; |
var VerCorrect=0; |
var HorCorrect=0; |
var FirstLineHorizontal=0; |
var MenuFramesVertical=1; |
var DissapearDelay=1000; |
var TakeOverBgColor=1; |
var FirstLineFrame="MyFrameOne"; |
var SecLineFrame="MyFrameTwo"; |
var DocTargetFrame="MyFrameTwo"; |
var HideTop=0; |
var TargetLoc=""; |
var MenuWrap=1; |
var RightToLeft=0; |
var UnfoldsOnClick=0; |
var WebMasterCheck=0; |
var ShowArrow=1; |
var KeepHilite=1; |
var Arrws=["tri.gif",5,10,"tridown.gif",10,5,"trileft.gif",5,10]; |
function BeforeStart(){;} |
function AfterBuild(){;} |
function BeforeFirstOpen(){;} |
function AfterCloseAll(){;} |
Menu1=new Array("Example 1","file.htm","",1,20,85,"","","","","");
Menu1_1=new Array("Example 1.1","","",0,20,120,"","","","","");
Menu2=new Array("Example 2","file.htm","",2,0,0,"","","","","");
Menu2_1=new Array("Example 2.1","file.htm","",3,20,190,"","","","","");
Menu2_1_1=new Array("Example 2.1.1","file.htm","",1,20,,200,"","","","","");
Menu2_1_1_1=new Array("<img src='busts.jpg'>","file.htm","",0,128,128,"","","","","");
Menu2_1_2=new Array("Example 2.1.2","file.htm","",0,0,0,"","","","","");
Menu2_1_3=new Array("Example 2.1.3","file.htm","",0,0,0,"","","","","");
Menu2_2=new Array("Example 2.2","file.htm","",8,0,0,"","","","","");
Menu2_2_1=new Array("Example 2.2.1","file.htm","",0,20,200,"","","","","");
Menu2_2_2=new Array("Example 2.2.2","file.htm","",0,0,0,"","","","","");
Menu2_2_3=new Array("Example 2.2.3","file.htm","",0,0,0,"","","","","");
Menu2_2_4=new Array("Example 2.2.4","file.htm","",0,0,0,"","","","","");
Menu2_2_5=new Array("Example 2.2.5","file.htm","",1,0,0,"","","","","");
Menu2_2_5_1=new Array("Example 2.2.5.1","file.htm","",1,32,150,"","","","","");
Menu2_2_5_1_1=new Array("Example 2.2.5.1.1","file.htm","",1,20,90,"","","","","");
Menu2_2_5_1_1_1=new Array("Example 2.2.5.1.1.1","file.htm","",0,22,400,"","","","","");
Menu2_2_6=new Array("Example 2.2.6","file.htm","",0,0,0,"","","","","");
Menu2_2_7=new Array("Example 2.2.7","file.htm","",0,0,0,"","","","","");
Menu2_2_8=new Array("Example 2.2.8","file.htm","",0,0,0,"","","","","");
Menu3=new Array("Example 3","file.htm","",0,0,0,"","","","","");
Menu4=new Array("Example 4","file.htm","",0,0,0,"","","","","");
Menu5=new Array("Example 5","javascript:top.location.href='file.htm'","",2,0,0,"","","","","");
Menu5_1=new Array("Example 5.1","file.htm","",0,20,140,"","","","","");
Menu5_2=new Array("Example 5.2 ","file.htm","",0,0,0,"","","","","");
Les variables
- NoOffFirstLineMenus
- Nombre- Nombre d'éléments dans la première ligne ou colonne de
votre menu.
- LowBgColor
- Texte- Couleur de fond des éléments lorsque la souris n'est pas
au-dessus.
Peut être un nom de couleur (en anglais) comme red ou blue ou une chaîne
RGB comme #ff552a.
Peut être défini par une variable de l'arborescence du menu.
-
- HighBgColor
- Texte- Couleur de fond des éléments lorsque la souris
est au-dessus.
Peut être un nom de couleur (en anglais) comme red ou blue ou une chaîne
RGB comme #ff552a.
Peut être défini par une variable de l'arborescence du menu.
-
- FontLowColor
- Texte- Couleur de texte des éléments lorsque la souris
n'est pas au-dessus.
- Peut être un nom de couleur (en anglais) comme red ou blue ou une
chaîne RGB comme #ff552a.
Peut être défini par une variable de l'arborescence du menu.
FontHighColor
- Texte- Couleur de texte des éléments lorsque la souris est au-dessus.
Peut être un nom de couleur (en anglais) comme red ou blue ou une
chaîne RGB comme #ff552a.
Peut être défini par une variable de l'arborescence du menu.
BorderColor
- Texte- Couleur de la bordure des éléments.
Peut être un nom de couleur (en anglais) comme red ou blue ou une
chaîne RGB comme #ff552a.
Peut être défini par une variable de l'arborescence du menu.
BorderWidth
- Nombre- Epaisseur de la bordure des éléments en pixels.
BorderBtwnElmnts
- Nombre (1 ou 0)- Contrôle s'il y a une bordure entre les éléments.
1 oui, 0 non.
FontFamily
- Texte- Plusieurs polices peuvent être déclarées séparées par des
virgules.
Exemple: arial, times new roman, ms comic sans. Le naviguateur
utilisera la première police trouvée sur le système
de l'utilisateur.
FontSize
- Nombre- Taille de la police en points.
- FontBold
- Nombre (1 ou 0)- 1 pour gras. 0 pour police normale.
- FontItalic
- Nombre (1 ou 0)- 1 pour italique. 0 pour police normale.
- MenuTextCentered
- Text string- Can be 'left', 'center' or 'right'.
- MenuCentered
- Texte- Peut être 'left', 'center', 'right', 'justify' ou ''.
- MenuVerticalCentered
- Texte - Peut être 'top', 'middle', 'bottom' or ''.
- ChildOverlap
- Nombre entre 0 et 1- Contrôle quelle partie du niveau est
recouverte par le niveau inférieur.
Avec une valeur de .25, un niveau est recouvert à 25% par le niveau inférieur.
Une valeur négative est possible mais pas utile.
- ChildVerticalOverlap
- Nombre entre 0 et 1- Contrôle le décalage vertical d'un niveau
inférieur par rapport au niveau parent.
Avec une valeur de .25, un niveau inférieur démarre à 25%
du niveau parent.
Une valeur négative affiche le départ plus haut.
-
-
- LeftPadding
- Nombre- Défini la distance entre le côté gauche du texte du menu
et le bord de l'élément.
-
-
TopPadding
- Nombre- Défini la distance entre le haut
du texte du menu et le bord de l'élément.
-
-
- StartTop
- Nombre- Défini la position verticale du menu dans le document.
Ignoré lorsque MenuVerticalCentered est à 1. Ignoré aussi lorsque
le menu est sur des pages de cadres organisées en colonnes. Le menu est dans
ce cas placé au bas du cadre défini en premier (FirstLineFrame).
-
-
- StartLeft
- Nombre- Défini la position horizontale du menu dans le document.
Ignoré lorsque MenuCentered est à 1. Ignoré aussi
lorsque le menu est sur des pages de cadres organisées en colonnes.
Le menu est dans ce cas placé le plus à droite du cadre défini
en premier (FirstLineFrame).
-
-
- VerCorrect
- Nombre- Défini la correction verticale de la 2ème ligne du menu
dans le document.
Peut être utile avec des pages de cadres.
- HorCorrect
- Nombre- Défini la correction horizontale de la 2ème
ligne du menu dans le document.
Peut être utile avec des pages de cadres.
-
-
- FirstLineHorizontal
- Nombre (1 ou 0)- Lorqu'il est à 1 les éléments du premier niveau
sont placés horizontalement les uns par rapport aux autres.
- Lorqu'il est à 0 ces éléments sont
placés verticalement les uns par rapport aux autres.
-
-
- MenuFramesVertical
- Nombre (1 ou 0)- Mettre cette variable à 1 quand vos pages de cadres
sont organisées en colonnes.
- La mettre à 0 lorsque vos pages de cadres
sont organisées en lignes.
Inutile lorsque le menu est sur une page simple, il doit néanmoins être mis à
0
ou
1.
-
-
- DissapearDelay
- Nombre- Durée en millisecondes pendant laquelle le sous-menu
reste visible lorsque la souris n'est plus au-dessus.
-
-
- TakeOverBgColor
- Nombre (1 ou 0)- Lorqu'il est à 1 la couleur de fond de la
page de cadres où la 1ère ligne du menu se trouve devient la même que celle
de la page de cadre où le sous-menu se trouve.Inutile lorsque le menu est
sur une page simple, il doit néanmoins être mis à 0 ou
1.
-
-
- FirstLineFrame
- Texte- Nom de la page où se situe la 1ère ligne lorsque les menus
sont utilisés dans des pages de cadres.
Lorsque le menu est utilisé dans une page simple il doit être mis à 'self'.
-
-
- SecLineFrame
- Texte- Nom de la page où se situe les sous-menus lorsque
les menus sont utilisés dans des pages de cadres.
Il est possible d'avoir SecLineFrame égal à FirstLineFrame
Lorsque le menu est utilisé dans une page simple il doit être
mis à 'self'.
-
-
- DocTargetFrame
- Texte- Nom de la page où le document est chargé lorsque
les menus sont utilisés dans des pages de cadres.
Egal normalement à SecLineFrame
Lorsque le menu est utilisé dans une page simple il doit être
mis à 'self'.
-
-
- HideTop
- Nombre (1 ou 0)- Utile seulement lorsque
les menus sont utilisés dans des pages de cadres. Lorsqu'il est à
1, le niveau du haut est caché lorsqu'un nouveau document est chargé dans
le cadre cible jusqu'à ce que le menu soit reconstruit.
-
-
- MenuWrap
- Nombre (1 ou 0)- Lorsqu'il est à 1, les items déroulés passent
automiquement à la ligne lorsque le menu ne rentre pas dans la fenêtre.
-
-
- RightToLeft
- Nombre (1 ou 0)- Lorsqu'il est à 1 le menu se déroule de
droite à gauche.
-
-
- TargetLoc
- Texte- Valide les positions relatives du menu.
1- Dans le fichier HTML, quand le menu montre que vous avez besoin d'un
div nommé :
<
div id='MenuPos' style='position:relative'></div>
2- Mettre TargetLoc à 'MenuPos'
3 - Mettre MenuCentered à 'left', MenuVerticalCentered à 'top' et StartTop
et StartLeft à 0
4 - StartTop, StartLeft et la variable Menu center peuvent toujours être
utilisés pour donner un décalage à partir de <div>.
Remarques : les différents
façons dont les naviguateurs interprètent les décalages pageX et pageY rend
ce paramètrage difficile. Les meilleurs résultats sont obtenus en mettant
la balise div à l'intérieur du tableau, en donnant à div la même dimension
que le 1er niveau du menu et en mettant une image transparente à l'intérieur
de div avec encore les mêmes dimensions que
le 1er niveau du menu.
<table>
<
tr><td>
<
div id='MenuPos' style='position:relative; width:102; height:102;'><img
src='transparent.gif' width='102' height='102'></div>
<
/td></tr>
<
/table>
-
-
- UnfoldsOnClick
- Nombre (1 ou 0)- Lorsqu'il est à 1 le menu se déroule
en cliquant. Lorsqu'il est à 0 le menu se déroule lorsque la souris passe
au-dessus.
- WebMasterCheck
- Nombre (1 ou 0)- Lorsqu'il est à 1 le script fait une vérification
sur le nom de la page de cadre et sur le menu.Quand
le menu est en fonctionnement ce nombre doit être 0.
-
-
- ShowArrow
- Nombre (1 ou 0)- Lorsqu'il est à 1, les flèches sont visibles.
- KeepHilite
- Nombre (1 ou 0)- Lorsqu'il est à 1, le chemin sélectionné
reste en surbrillance.
-
-
- Arrws
- Tableau- Décris les images utilisées pour les flèches.
Format : source, largeur, hauteur
-
-
- BeforeStart
- Fonction- Appelée juste avant que le menu soit construit. Vide par
défaut. Peut être défini par l'utilisateur.
-
-
- AfterBuild
- Fonction- Appelée juste après que le menu soit construit.
Vide par défaut. Peut être défini par l'utilisateur.
-
-
- BeforeFirstOpen
- Fonction- Appelée lorsque la souris entre dans un item qui
a un sous-menu. Vide par défaut. Peut être défini par
l'utilisateur.
-
-
- AfterCloseAll
- Fonction- Appelée lorsque la souris quitte le menu. Vide
par défaut.
Peut être défini par
l'utilisateur.
L'arborescence du menu
Les noms de tous les éléments commencent par Menu
Le premier élément du 1er niveau est appelé Menu1.
Le
deuxième élément du 1er niveau est appelé Menu2.
Le
troisième élément du 1er niveau est appelé Menu3,
etc.
Si Menu1 a des sous-éléments, le premier de ceux-ci est
appelé Menu1_1,
le second Menu1_2, etc.
Si Menu1_2 a des sous-éléments, le premier de ceux-ci
est appelé Menu1_2_1,
le second Menu1_2_2, etc.
L'arborescence du menu doit ressembler à quelque chose comme :
Menu1 le premier élément du 1er niveau
Menu1_1 le premier sous-élément de Menu1
Menu1_2 le deuxième sous-élément de Menu1
Menu1_2_1 le premier sous-élément de Menu1_2
Menu1_2_2 le deuxième sous-élément de Menu1_2
Menu1_3 le troisième sous-élément de Menu1
Menu1_3_1 le premier sous-élément de Menu1_3
Menu1_3_1_1 le premier sous-élément de Menu1_3_1
Menu1_3_1_2 le deuxième sous-élément de Menu1_3_1
Menu2 le deuxième élément du 1er niveau
Menu3 le troisième élément du 1er niveau
Menu3_1 le premier sous-élément de Menu3
Menu3_1_1 le premier sous-élément de Menu3_1
Menu3_2 le deuxième sous-élément de Menu3
Il peut y avoir autant d'éléments et de sous-niveaux que vous voulez.
L'ordre dans l'arborescence du menu est très importante.
Vous pouvez aussi construire une arborescence comme :
Menu1_3_1_2
Menu3
Menu1
Menu2
Menu1_3_1_1
Menu1_1
Menu3_1_1
Menu1_2
Menu1_2_1
Menu1_2_2
Menu1_3
Menu1_3_1
Menu3_1
Menu3_2
Les variables de l'arborescence du menu
Menu1=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
Menu1_1=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
Menu1_2=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
Menu1_2_1=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
Menu1_2_2=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
Menu1_3=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
Menu1_3_1=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
Menu1_3_1_1=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
Menu1_3_1_2=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
Menu2=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
Menu3=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
Menu3_1=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
Menu3_1_1=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
Menu3_2=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
- TextToShow
- Texte- Ce que vous voulez afficher dans l'élément. Peut
être du texte, une image ou du HTML.
Pour afficher une image, il faut taper "<img
src='MonImage'>"
Pour afficher 2 images permutées lors du passage de la souris, taper "rollover:MyImage1:MyImage2"
Pour laisser ce champ vide, taper ""
- Link
- Texte- Où vous voulez aller lorsque vous cliquez sur cet élément.
Taper "MonLien"
Peut-être aussi utilisé pour lancer du javascript. Par exemple
si vous voulez que le lien s'ouvre dans la page principale (top), utiliser
"javascript:top.document.location.href='Lien.htm';"
Vous pouvez en fait lancer un script entier lorsque l'élément est cliqué
à l'aide du javascript :"javascript:{votre
script; autre function;}"
-
-
- BgImage
- Texte- Image de fond de l'élément. Non
supporté par NS4
quand le menu est sur des pages de cadres.
- NoOfSubs
- Nombre- Le nombre de sous-éléments de cet élément dans le prochain
niveau.
-
-
- Height
- Nombre- La hauteur en pixels de l'élément.
Doit avoir une valeur pour chaque élément qui fini par 1 (Menu1, Menu5_3_1).
Doit être à 0 pour tous les autres éléments.
Les éléments dans une colonne peuvent avoir des hauteurs différentes.
Tous les éléments d'une même ligne ont la hauteur du 1er éléments de cette ligne.
-
-
- Width
- Nombre- La largeur en pixels de l'élément.
Doit avoir une valeur pour chaque élément qui fini par 1 (Menu1,
Menu5_3_1). Doit être à 0 pour tous les autres éléments.
Les éléments dans une ligne peuvent avoir des largeurs différentes.
Tous les éléments d'une même colonne ont la largeur du 1er éléments
de cette colonne.
-
-
- BgColor
- Texte- Background color of this element when the mouse is not over
the element.
When used it over rules the global variable LowBgColor
When not used it must be "". Can be a supported color name like red or blue or
a RGB string like #ff552a.
Texte- Background color of this element when the mouse is not over the
element.
When used it over rules the global variable LowBgColor
When not used it must be "". Can be a supported color name like red or blue or
a RGB string like #ff552a.
- BgHiColor
- Texte- Couleur de fond de l'élément lorsque la souris
est au-dessus de cet l'élément.
Est prioritaire sur la variable HighBgColor lorsqu'elle est utilisée.
- Lorsqu'elle n'est pas utilisée, doit être "".
Peut être un nom de couleur (en anglais) comme red ou blue ou une chaîne
RGB comme #ff552a.
-
-
- FontColor
- Texte- Couleur du texte de l'élément lorsque la souris
n'est pas au-dessus de cet l'élément.
Est prioritaire sur la variable LowFontColor lorsqu'elle est utilisée.
Lorsqu'elle
n'est pas utilisée, doit être "".
Peut être un nom de couleur (en anglais) comme red ou blue ou une chaîne
RGB comme #ff552a.
-
-
- FontHiColor
- Texte- Couleur du texte de l'élément lorsque la souris
est au-dessus de cet l'élément.
Est prioritaire sur la variable HighFontColor lorsqu'elle est utilisée.
Lorsqu'elle n'est pas utilisée, doit être "".
Peut être un nom de couleur (en anglais) comme red ou blue ou une chaîne
RGB comme #ff552a.
-
-
- BorderColor
- Texte- Couleur de la bordure de ce groupe d'éléments.
Seulement la couleur des éléments qui finissent par 1 est utilisée.
Est prioritaire sur la variable BorderColor lorsqu'elle est utilisée.
Lorsqu'elle n'est pas utilisée, doit être "".
Peut être un nom de couleur (en anglais) comme red ou blue ou une chaîne
RGB comme #ff552a.