begin process at 2010 03 21 01:51:37
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Menu & Co

 > MENU DEROULANT

MENU DEROULANT


 Information sur la source

Note :
2,5 / 10 - par 2 personnes
2,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Menu & Co Niveau :Débutant Date de création :13/06/2003 Date de mise à jour :13/06/2003 09:52:23 Vu :54 782
Auteur : snake741

Ecrire un message privé
Site perso
Commentaire sur cette source (13)
Ajouter un commentaire et/ou une note

 Description

Voila, ceci est un menu deroulant a l'aide de parents et d'enfants.
Il vous faudra faire 2 images bas.gif et haut.gif si vous le desirer
(sinon enlever les lignes des images=) imgIcon.src = "bas.gif" ; et imgIcon.src = "haut.gif" ;)

Je vous ai mis 2 exemple mais vous pouvez en mettre Ad Vitam Eternam Amusez vous bien !

Source

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  • <html><head><META name='author' content='www.teamcro.com'>
  • <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
  • <META name='revisit-after' content='20'>
  • <META NAME="copyright" CONTENT="Copyright 2003 - Team -=[CrO]=- WwW.TeAmCrO.Fr.St">
  • <title>Menu !</title>
  • <script type="text/javascript"><!--
  • var intCount = 0;
  • //-Fonction d'ajout d'entrées principales-------------------------
  • function DynamicMenu_addParent(strName) {
  • var strID = 'ID' + intCount++;
  • var strTemp = '<DIV ID="' + strID + '" CLASS="parent"';
  • strTemp += ' onClick="expandCollapse(this);">';
  • strTemp += '<IMG SRC="haut.gif" >';
  • strTemp += '&nbsp;' + strName ;
  • strTemp += '<DIV STYLE="display: none" CLASS="child"></DIV>';
  • strTemp += '</DIV>';
  • this.div.innerHTML += strTemp;
  • this.currentChild = document.getElementById(strID);
  • }
  • //-Fonction d'ajout de liens dans le menu-------------------------
  • function DynamicMenu_addChild(strName,strURL) {
  • var strTemp = '<A HREF="' + strURL + '"' + ' onClick="cancelBubble(arguments[0]);">' + strName + '</A><BR>';
  • if (document.all) {
  • this.currentChild.children[1].innerHTML += strTemp;
  • } else {
  • this.currentChild.childNodes[2].innerHTML += strTemp;
  • }
  • }
  • //-inhibe la cascade d'évènements au DIV conteneur----------------
  • function cancelBubble(netEvent) {
  • if (document.all) {
  • window.event.cancelBubble = true;
  • } else {
  • netEvent.cancelBubble = true;
  • }
  • }
  • //-Contracte ou expanse le menu-----------------------------------
  • function expandCollapse(objElement) {
  • if (document.all) {
  • var imgIcon = objElement.children[0];
  • objElement = objElement.children[1];
  • } else {
  • var imgIcon = objElement.childNodes[0];
  • objElement = objElement.childNodes[2];
  • }
  • if (objElement.style.display == "none") {
  • objElement.style.display = "block" ;
  • imgIcon.src = "bas.gif" ;
  • } else {
  • objElement.style.display = "none" ;
  • imgIcon.src = "haut.gif" ;
  • }
  • }
  • //-Fonction de création de menu dynamique-------------------------
  • function DynamicMenu() {
  • var id = "Menu" + intCount++;
  • document.write('<DIV Id="' + id + '"></DIV>');
  • this.div = document.getElementById(id);
  • this.currentChild = null;
  • this.addParent = DynamicMenu_addParent;
  • this.addChild = DynamicMenu_addChild;
  • }
  • // --></SCRIPT>
  • <style type="text/css">
  • <!--
  • .parent {font-family: verdana;font-weight: bold ;color: #FFFFFF;font-size: 10px;margin-top: 10;cursor: hand;}
  • .child {font-size: 9px;decoration: none;font-weight: normal;margin-left: 10pt;}
  • -->
  • </style>
  • </head>
  • <body bgcolor="000000" text="#ffffff">
  • <p class="unnamed1">
  • <script language="Javascript" type="text/javascript">
  • var menu = new DynamicMenu();
  • menu.addParent('menu1');
  • menu.addChild('Lien1', 'page1.php');
  • menu.addChild('lien2', 'page2.php');
  • menu.addChild('lien3', 'page3.php');
  • menu.addChild('lien4', 'page4.php');
  • menu.addChild('lien5', 'page5.php');
  • menu.addParent('menu2');
  • menu.addChild('Lien1', 'page1.php');
  • menu.addChild('lien2', 'page2.php');
  • menu.addChild('lien3', 'page3.php');
  • menu.addChild('lien4', 'page4.php');
  • menu.addChild('lien5', 'page5.php');
  • </script>
  • </p>
  • <p>nbsp;</p>
  • <p>&nbsp;</p>
  • <p>voila avec tout ca vous povez mettre pleins de menus !! il
  • suffit juste de recopier le code , remplacer vos liens et le nom des liens</p>
  • <p class="unnamed1">menu.addParent('menu3'); // et ainsi de suite !</p>
  • <p>menu.addChild('Lien1', 'page1.php');<br>
  • menu.addChild('lien2', 'page2.php');<br>
  • menu.addChild('lien3', 'page3.php');<br>
  • menu.addChild('lien4', 'page4.php');<br>
  • menu.addChild('lien5', 'page5.php'); <br>
  • </p>
  • voila c'est tout !
  • </body></html> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><META name='author' content='www.teamcro.com'>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<META name='revisit-after' content='20'>
<META NAME="copyright" CONTENT="Copyright 2003 - Team -=[CrO]=-  WwW.TeAmCrO.Fr.St">
<title>Menu !</title>



<script type="text/javascript"><!--

var intCount = 0;
//-Fonction d'ajout d'entrées principales-------------------------
function DynamicMenu_addParent(strName) {
	var strID = 'ID' + intCount++;
	var strTemp = '<DIV ID="' + strID + '" CLASS="parent"';
        strTemp += ' onClick="expandCollapse(this);">';
        strTemp += '<IMG SRC="haut.gif" >';
        strTemp += '&nbsp;' + strName ;
        strTemp += '<DIV STYLE="display: none" CLASS="child"></DIV>';
        strTemp += '</DIV>';
	this.div.innerHTML += strTemp;
        this.currentChild = document.getElementById(strID);
}
//-Fonction d'ajout de liens dans le menu-------------------------
function DynamicMenu_addChild(strName,strURL) {
	var strTemp = '<A HREF="' + strURL + '"' + ' onClick="cancelBubble(arguments[0]);">' + strName + '</A><BR>';
	if (document.all) {
        	this.currentChild.children[1].innerHTML += strTemp;
	} else {
        	this.currentChild.childNodes[2].innerHTML += strTemp;
	}
}
//-inhibe la cascade d'évènements au DIV conteneur----------------
function cancelBubble(netEvent) {
	if (document.all) {
		window.event.cancelBubble = true;
	} else {
        	netEvent.cancelBubble = true;
	}
}
//-Contracte ou expanse le menu-----------------------------------
function expandCollapse(objElement) {
	if (document.all) {
        	var imgIcon = objElement.children[0];
                objElement = objElement.children[1];
	} else {
        	var imgIcon = objElement.childNodes[0];
                objElement = objElement.childNodes[2];
	}
	if (objElement.style.display == "none") {
        	objElement.style.display = "block" ;
                imgIcon.src = "bas.gif" ;
	} else {
        	objElement.style.display = "none" ;
                imgIcon.src = "haut.gif" ;
	}
}
//-Fonction de création de menu dynamique-------------------------
function DynamicMenu() {
	var id = "Menu" + intCount++;
        document.write('<DIV Id="' + id + '"></DIV>');
	this.div = document.getElementById(id);
        this.currentChild = null;
	this.addParent = DynamicMenu_addParent;
        this.addChild = DynamicMenu_addChild;
}
// --></SCRIPT>

<style type="text/css">
<!--




.parent {font-family: verdana;font-weight: bold ;color: #FFFFFF;font-size: 10px;margin-top: 10;cursor: hand;}
.child  {font-size: 9px;decoration: none;font-weight: normal;margin-left: 10pt;}


-->
</style>






</head>

<body bgcolor="000000" text="#ffffff">
<p class="unnamed1"> 
  <script language="Javascript" type="text/javascript">
var menu = new DynamicMenu();

menu.addParent('menu1');
menu.addChild('Lien1', 'page1.php');
menu.addChild('lien2', 'page2.php');
menu.addChild('lien3', 'page3.php');
menu.addChild('lien4', 'page4.php');
menu.addChild('lien5', 'page5.php'); 






menu.addParent('menu2');

menu.addChild('Lien1', 'page1.php');
menu.addChild('lien2', 'page2.php');
menu.addChild('lien3', 'page3.php');
menu.addChild('lien4', 'page4.php');
menu.addChild('lien5', 'page5.php'); 




</script>
</p>
<p>nbsp;</p>
<p>&nbsp;</p>
<p>voila avec tout ca vous povez mettre pleins de menus !! il 
  suffit juste de recopier le code , remplacer vos liens et le nom des liens</p>
<p class="unnamed1">menu.addParent('menu3'); // et ainsi de suite !</p>
<p>menu.addChild('Lien1', 'page1.php');<br>
  menu.addChild('lien2', 'page2.php');<br>
  menu.addChild('lien3', 'page3.php');<br>
  menu.addChild('lien4', 'page4.php');<br>
  menu.addChild('lien5', 'page5.php'); <br>
</p>
voila c'est tout ! 
</body></html>

 Conclusion

euu... les bugs connus :
juste le mettre dans un tableau et mettre les autres pages aussi dans un tableau parce que sinon vos pages se decaleeront en fontion du nombre de menus ouvert... a part ca ... c'est tout !


 Sources de la même categorie

Source avec Zip Source avec une capture MENU VERTICALE GAUCHE ET DROIT DEROULANT par kazma
Source avec Zip Source avec une capture MENU VERTICALE EN TRANSPARENCE par dlvains
Source avec Zip Source avec une capture MENU DÉROULANT EN IMAGES par dlvains
Source avec Zip TBFRAME: TAB BROWSING FRAME par triumphs
Source avec Zip Source avec une capture MENU PRINCIPAL par ali1987
Toutes les sources de la catégorie Menu & Co

Commentaires et avis

Commentaire de snake741 le 13/06/2003 08:45:44

Bon soyez po trop mechants c'est la premiere source que je pose ici ...

Commentaire de linkinpar236737 le 14/06/2003 11:24:45

Franchement, ce menu n'est pas très joli joli a voir et ça m'étonnerai que beaucoup de personnes veuillent le mettre sur leur site car le design n'est pas terrible déjà, c'est très connu en plus. Mais ca peut toujours servir, 3/10

Commentaire de Frank339 le 05/10/2003 12:22:52

Et pour ajouter une image a la place du lien ??? je fais comment ?

Commentaire de linkinpar236737 le 05/10/2003 14:41:37

&lt;a href="ton lien"&gt;&lt;img src="ton image"&gt;&lt;/a&gt;

Commentaire de Frank339 le 05/10/2003 20:26:16

un peu novice--- :-p

menu.addChild et ???

Commentaire de nanarchiste le 18/01/2004 17:43:43

bon c sur ke sa  tout seul sur un site sa fait pas lerch c meme dessevant
mai on pourrai l'inserer dans un menu
exemple:

          &gt;PhP
scripts &gt; jAVASCRIPT
          &gt;VB

sa pourrai etre plus interressant
mai la c vrai ke c pas top
a ameliorer
4/10

Commentaire de snefrou le 15/02/2004 11:07:20

Hello tout le monde,
ce code contrairement à ce que tout le monde peut dire peut être utilisé de façon très utile dans un site pour gérer la navigation en fonction de la place de l'écran. Le gros gros hic est que le code n'est pas gérable sous netscape !!!!!
Ca c'est plus tôt gênant !!! Donc si quelqu'un connaît la façon de résoudre l'acceptabilité par netscape il est le bien venu, sinon il vaut mieux oublier le code (et donc les 2 mois de travail que je viens de réaliser à partir de ce code)
bizz;
Snefrou.

Commentaire de RazielReaver le 21/04/2004 17:04:41

Je me suis permis d'y ajouter la touche du designer

voila ce qu'on peut faire avec ce script sympa (ca ressemble un peu aucadre de www.javascriptfr.com :)))

[url]http://mandrag.free.fr[/url]


Commentaire de crista le 27/05/2004 17:04:22

Merci snake741 pout ton code.
J'ai fait une amélioration de ce code en le faisant multi-niveaux.
Voir http://www.javascriptfr.com/code.aspx?ID=23191.

Commentaire de Syruis le 09/07/2004 16:01:33

Moi je le trouve pas mal mais ou rajouter mais &lt;/td&gt; pour avoir un menu qui deroule les table??? c telement plus beaux :)

Commentaire de fanoube le 19/08/2004 15:16:32

Je me suis servi de ce menu, il est très simple

mais comment on change le caractère "police" et "couleur" des titres menu1 et menu 2 de menu.addparent

Commentaire de Nitrite59 le 29/08/2007 17:38:25

Désolé mais c'est vraiment abominable. Faut le modifier enormement pour que ca soit graphiquement beau a voir :/ Sinon bonne continuation !

Commentaire de rottweiler le 16/04/2008 18:32:05

tout ca pour ca comme dirait l'autre

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


Console Nintendo Wii
Entre 220€ et 307€

Visiter le guide achat

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,608 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)