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

Soyez le premier à donner votre avis sur cette source.

Vue 22 862 fois - Téléchargée 4 257 fois

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

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
1
Date d'inscription
vendredi 5 octobre 2007
Statut
Membre
Dernière intervention
10 janvier 2008

bonjour

j'ai un petit probleme j'ai des photos et des animation flash sous mozilla qui n'apparaissent pas
pouvez vous me dire comment resoudre ce petit soucit

merci
Messages postés
4
Date d'inscription
samedi 21 juin 2003
Statut
Membre
Dernière intervention
24 juin 2007

A l'attention de François Robert,

L'exemple fonctionne nickel. Download le ZIP TOUT Y EST
Messages postés
4
Date d'inscription
samedi 21 juin 2003
Statut
Membre
Dernière intervention
24 juin 2007

A l'attention de Fabrice,
LOL, c ke t'as un sérieux problème avec IE !!!!
J'ai testé sous IE 6 & 7 et ça marche. ET EN PLUS sur des pc & connections DIFFERENTES
Messages postés
5
Date d'inscription
mercredi 29 novembre 2006
Statut
Membre
Dernière intervention
11 juillet 2007

Bonjour

Le code source afficher ci-dessus et à mettre entre quelle balise ? HEAD ou BODY ?
C'est du HTML ou PHP ?

Merci encore.
Messages postés
2
Date d'inscription
mardi 27 avril 2004
Statut
Membre
Dernière intervention
5 juin 2007

Citation: "SINON visitez un de mes sites : http://www.jack-russell.tk/"

LOL, sous IE le menu ne s'affiche même pas.
Afficher les 10 commentaires

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.