Menu deroulant

Commenter

Contenu du snippet

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 / Exemple : 


<!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 !

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.