 |
 Menu d'images avec sous-menus paramétrables |
|
|
|
Connexion ratee
|
|
Ce script permet de mettre en place une barre de navigation avec des titres de menus en
images ou textes, des sous-menus par rubriques en textes ou images également, des effets de
'rollover' (IE uniquement). Au passage de la souris sur le titre du menu, celui-ci se
déploie et affiche son contenu, le titre passe au dessous du menu.
Ce menu est totalement paramétrable : nombre de rubriques, nombre de sous-rubriques, couleurs des menus
indépendantes, style des menus indépendants... |
|
|
|
|
|
Le menu est constitué de 3 éléments visuels principaux :
- un calque portant le titre du menu (autant que de titres de menu),
- un calque portant le contenu du menu (sous-rubriques), autant que précédemment,
- un calque de fond de titre.
Le calque de fond sert a conserver une couleur au-dessus du contenu du menu lorsqu'il est déployé
(le titre est parti au dessous du contenu).
Tous les calques doivent être placés dans la partie 'body', tandis que tous les
éléments 'variables' (taille du menu, couleurs utilisées, espacement entre les intitulés,
contenus, liens, cible des liens) sont placés au départ du script et sont à renseigner suivant vos
besoins.
A noter qu'une feuille de style est également utilisée pour l'apparence des textes des menus, libre a vous
d'en créer plusieurs ou non.
|
|
|
|
|
|
dans la partie <head>
 |
|
 |
|
<style>
/* Styles utilisés par les menus, maximum : autant que de menus, minimum : 1 */
.style-1 a { font-family: arial; font-size: 12px; color: #000000; text-decoration: none; }
.style-2 a { font-family: times; font-size: 14px; color: #FFFFFF; font-weight: bold; }
.style-3 a { font-family: courier; font-size: 11px; color: #0000FF; text-decoration: none; }
</style>
<script language="JavaScript">
// Détection de navigateur
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;
// Position du menu en X et en Y (point le plus haut à gauche) en pixels
placement_x = 50;
placement_y = 25;
// Taille des images des noms des menus (tous identiques) en pixels
largeur = 125;
hauteur = 25;
// Espace entre chaque menu en pixels
espace = 15;
// Nombre de menus
nb_menus = 4;
// Couleur des fonds de menu 'off'
color_menu1 = "#00CC00";
color_menu2 = "#3333FF";
color_menu3 = "#EEEE00";
color_menu4 = "#EE0000";
// Couleur des fonds de menu 'on' (IE uniquement)
color_menu_on1 = "#009900";
color_menu_on2 = "#3333CC";
color_menu_on3 = "#FFFF00";
color_menu_on4 = "#FF6666";
// Styles des liens des sous-menus (à choisir dans la liste des styles de la feuille de styles)
style_menu1 = "style-1";
style_menu2 = "style-2";
style_menu3 = "style-3";
style_menu4 = "style-1";
/* Contenu des menus (liens, target (fenêtre d'ouverture du lien : _self : identique, _blank: nouvelle) et textes à afficher. Si vous utilisez des images, remplacez le texte du lien par la balise image qui va bien (veillez à ce qu'elles aient la même hauteur que l'image de titre de menu) */
var data_menu1 = new Array(
'fichier11.html;_self;sous-menu 11',
'fichier12.html;_self;sous-menu 12',
'fichier13.html;_self;sous-menu 13',
'fichier14.html;_self;sous-menu 14'
);
var data_menu2 = new Array(
'fichier21.html;_self;sous-menu 21',
'fichier22.html;_self;sous-menu 22',
'fichier23.html;_self;sous-menu 23'
);
var data_menu3 = new Array(
'fichier31.html;_self;sous-menu 31',
'fichier32.html;_self;sous-menu 32',
'fichier33.html;_self;sous-menu 33',
'fichier34.html;_self;sous-menu 34',
'fichier35.html;_self;sous-menu 35'
);
var data_menu4 = new Array(
'fichier41.html;_self;sous-menu 41',
'fichier42.html;_self;sous-menu 42'
);
// Déplacement en-têtes de menus (pour les mettre en bas des sous-menus)
function move(rubrique) {
if (ns4) {
var titre = eval('document.' + rubrique);
var contenu = eval('document.s' + rubrique);
var compare = placement_y;
}
if (ie4) {
var titre = eval(rubrique + '.style');
var contenu = eval('s' + rubrique + '.style');
var compare = placement_y + "px";
}
// Calcul de la hauteur de décallage du titre de chaque menu
var sous_menu = eval('data_' + rubrique).length + 1;
sous_menu = sous_menu * hauteur;
if (titre) {
// Si le titre est à sa position initiale
if (titre.top == compare) {
var position = titre.top;
// Déplacement vers le bas de la hauteur calculée précédemment
titre.top = placement_y + sous_menu;
// Affichage du sous-menu
contenu.visibility = 'visible';
}
// Si le titre n'est pas en position initiale, on le replace
else {
titre.top = placement_y;
// Masquage du sous-menu
contenu.visibility = 'hidden';
}
}
}
// Création du fond sous les titres des menus
var entetes
function arriere() {
entetes = "<table border='0' cellspacing='0' cellpadding='0'><tr>";
for ( i = 1; i <= nb_menus; i++) {
styles = eval('color_menu' + i);
var cale = "";
if ( espace > 0 ) {
cale = "<td><img src='px.gif' width='" + espace + "' height='1'></td>";
}
entetes += "<td bgcolor='" + styles + "'><img src='px.gif' width='" + largeur + "' height='" + hauteur + "'></td>" + cale;
}
entetes += "</tr></table>";
}
// Création des sous-menus
var affiche
function affichage(indexrub) {
sousrub = eval('data_menu' + indexrub);
couleur = eval('color_menu' + indexrub);
style = eval('style_menu' + indexrub);
affiche = "<table border='0' cellspacing='0' cellpadding='0' width='" + largeur + "' bgcolor='" + couleur + "'>";
for (i = 0; i < sousrub.length; i++) {
var contenu = sousrub[i].split(";");
affiche += "<tr><td><img src='px.gif' width='1' height='" + hauteur + "'></td><td id='c_" + indexrub + i + "' name='c_" + indexrub + i + "' OnMouseOver='fond_on(\"c_" + indexrub + i + "\"," + indexrub + ");' OnMouseOut='fond_off(\"c_" + indexrub + i + "\"," + indexrub + ");' class='" + style + "'><a href='" + contenu[0] + "' target='contenu[1]'>" + contenu[2] + "</a></td></tr>";
}
affiche += "</table>";
}
// Rollovers du menu - IE uniquement
function fond_on(cellule,index) {
if (ie4) {
var zone = eval(cellule).style;
zone.backgroundColor = eval('color_menu_on' + index);
}
}
function fond_off(cellule,index) {
if (ie4) {
var zone = eval(cellule).style;
zone.backgroundColor = eval('color_menu' + index);
}
}
function init_menu() {
if (ns4) {
deb = "document.";
fin = "";
}
if (ie4) {
deb = "";
fin = ".style";
}
// Placement du fond des titres des menus
eval(deb + 'fond' + fin).left = placement_x;
eval(deb + 'fond' + fin).top = placement_y;
// Placement des sous-menus
for ( m = 1; m <= nb_menus; m++ ) {
eval(deb + 'menu' + m + fin).left = placement_x + (largeur*(m-1) + espace*(m-1));
eval(deb + 'menu' + m + fin).top = placement_y;
eval(deb + 'smenu' + m + fin).left = placement_x + (largeur*(m-1) + espace*(m-1));
eval(deb + 'smenu' + m + fin).top = placement_y + hauteur;
}
}
</script>
|
|
|
 |
|
 |
dans la partie <body>
|
|
|
|
<body OnLoad="init_menu();">
<!-- Calque 'FOND DES TITRES' (pour éviter un blanc lors du déplacement du titre -->
<div name="fond" id="fond" style="position: absolute; top: 1px; left: 1px; visibility: visible; z-index: 1;">
<script language="JavaScript">arriere();document.write(entetes);</script>
</div>
<!-- Calque 'RUBRIQUE 1 - TITRE' -->
<div name="menu1" id="menu1" style="position: absolute; top: 1px; left: 1px; visibility: visible; z-index: 2;">
<a href="#" OnMouseOver="move('menu1');"><img src="images/menu_1.gif" border="0"></a>
</div>
<!-- Calque 'RUBRIQUE 1 - CONTENU' -->
<div name="smenu1" id="smenu1" style="position: absolute; top: 1px; left: 1px; visibility: hidden; z-index: 3;">
<script language="JavaScript">affichage(1);document.write(affiche);</script>
</div>
<!-- Calque 'RUBRIQUE 2 - TITRE' -->
<div name="menu2" id="menu2" style="position: absolute; top: 1px; left: 1px; visibility: visible; z-index: 2;">
<a href="#" OnMouseOver="move('menu2');"><img src="images/menu_2.gif" border="0"></a>
</div>
<!-- Calque 'RUBRIQUE 2 - CONTENU' -->
<div name="smenu2" id="smenu2" style="position: absolute; top: 1px; left: 1px; visibility: hidden; z-index: 3;">
<script language="JavaScript">affichage(2);document.write(affiche);</script>
</div>
<!-- Calque 'RUBRIQUE 3 - TITRE' -->
<div name="menu3" id="menu3" style="position: absolute; top: 1px; left: 1px; visibility: visible; z-index: 2;">
<a href="#" OnMouseOver="move('menu3');"><img src="images/menu_3.gif" border="0"></a>
</div>
<!-- Calque 'RUBRIQUE 3 - CONTENU' -->
<div name="smenu3" id="smenu3" style="position: absolute; top: 1px; left: 1px; visibility: hidden; z-index: 3;">
<script language="JavaScript">affichage(3);document.write(affiche);</script>
</div>
<!-- Calque 'RUBRIQUE 4 - TITRE' -->
<div name="menu4" id="menu4" style="position: absolute; top: 1px; left: 1px; visibility: visible; z-index: 2;">
<a href="#" OnMouseOver="move('menu4');"><img src="images/menu_4.gif" border="0"></a>
</div>
<!-- Calque 'RUBRIQUE 4 - CONTENU' -->
<div name="smenu4" id="smenu4" style="position: absolute; top: 1px; left: 1px; visibility: hidden; z-index: 3;">
<script language="JavaScript">affichage(4);document.write(affiche);</script>
</div>
Contenu de la page
|
|
|
|
|
|
|
|
|
|
|
|
|
