J'avais besoin d'un menu déroulant (2 niveaux) efficace et pas trop lourd et facilement paramétrable pour plusieurs sites.
J'ai trouvé mon bonheur.
Avant tout merci à iubito (dont je me suis inspiré
http://iubito.free.fr) et aussi à pompage.net (
http://pompage.net/pompe/deroulants/) où j'ai trouvé la façon de définir un event 'mouseover' sur les tags <LI> (Je n'ai pas changé un iota de ce script, c'est à eux)
DONC un concentré de bonnes idées remasterisées !!!!!!!!!!!!!!!
Mon menu permet d'insérer un menu déroulant avec sous menu (avec un peu de modif on peut insérer des sous-niveaux).
Les sous-menus peuvent s'afficher avec une icône.
Le menu est en fait un <UL><LI>, (là je n'invente rien) accompagné d'un CSS qui redéfinit ces tags <Menu.css>.
Les items du menus sont paramétrables dans le fichier <OptionMenu.js>
Fab
Source / Exemple :
La page à afficher :
Fo mettre ce qui fo
<LINK href="../css/Menu.css" rel="stylesheet" type="text/css">
<LINK href="../css/Page.css" rel="stylesheet" type="text/css">
<script src="../menu/OptionMenu.js"></script>
<script src="../menu/ULMenu.js"></script>
<TD><!-- Début du menu Là où cela vous arrange, MAIS une table est toujours bien -->
<script>Display_Menu();</script>
<!-- Fin du menu -->
</TD>
/*Dans le fichier ULMenu.js
function Display_Menu() {
var i= 0, j = 0;
// Début du layer qui contient le menu
document.write('<DIV id="div_Menu">');
document.write('<UL id="ul_MainMenu">'); // Début bloc UL niveau 1. Ne pas oublier l'id, c'est l'objet de base.
// Début affichage du menu (bloc LI) de niveau 1
for (i = 0; i < iNbMenu; i++) {
document.write('<LI><A href="#"> ' + aMenu[i][0] + '</A><UL>'); // Le texte niveau 1 à afficher
for (j = 1; j < aMenu[i].length; j++) {
// Début affichage du menu de niveau 2
document.write('<LI><A href="'); // Début affichage du menu (bloc LI) de niveau 2
document.write(SplitOptionSsMenu(aMenu[i][j], 'URL')); // Ici le lien vers la page à afficher
document.write('"> <img src="');
// Placer une image (25x25). Si pas TOUJOURS placer une invisible.
document.write(SplitOptionSsMenu(aMenu[i][j], 'IMG'));
document.write('"> ° ');
document.write(SplitOptionSsMenu(aMenu[i][j], 'TXT')); // Le texte niveau 2 à afficher
document.write('</A></LI>'); // Fin affichage du menu (bloc LI) de niveau 2
}
document.write('</UL>'); // Fin bloc UL niveau 2
// Fin affichage du menu de niveau 2
document.write('</LI>');// Fin affichage du menu (bloc LI) de niveau 1
}
document.write('</UL>'); // Début bloc UL niveau 1
document.write('</DIV>');
// Fin du layer qui contient le menu
}
Le fichier OptionMenu.js comprend une la fonction qui retourne les URL, IMG, et TXT ---> SplitOptionSsMenu
Celle-ci est basée sur un tableau à 2 dimensions de string qui contiennent les infos nécessaire à l'affichage.
Du genre :
aMenu[0] = new Array(5);
aMenu[0][0] = 'Le Jack Russell';
aMenu[0][1] = 'Jack Russell' + SEPARATOR_URL + 'JackRussell.htm' + SEPARATOR_IMG + '../menu/petitjack.gif';
aMenu[0][2] = 'Son histoire' + SEPARATOR_URL + 'JohnRussell.htm' + SEPARATOR_IMG + '../menu/Histoire.gif';
Et la fonctoin lit et retourne :
function SplitOptionSsMenu(sOption, sType) {
var iPos1 = 0, iPos2 = 0;
var sRetValue = '';
switch (sType) {
case 'TXT':
sRetValue = sOption.substr(0,sOption.indexOf(SEPARATOR_URL));
break;
case 'URL':
iPos1 = sOption.indexOf(SEPARATOR_URL) + 2, sOption.length;
iPos2 = sOption.indexOf(SEPARATOR_IMG), sOption.length;
sRetValue = sOption.substring(iPos1, iPos2);
break;
case 'IMG':
sRetValue = sOption.substr(sOption.indexOf(SEPARATOR_IMG) + 2,sOption.length);
break;
}
return sRetValue;
}
Et voilà ...........
Je vous fournis le zip avec ce qui est nécessaire.
J'ai testé en FireFox 1.5.0.3 et IE 6.0.2800. Mais j'ai pas le temps de voir avec les autres. Donc si vous avez un autre browser ... dites moi koi
Fab
Conclusion :
Merci à iubito et à pompage.net
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.