Menu déroulant (je sais.... encore...) en javascript & css.

Télécharger le projet
Commenter

Description

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
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.