Un menu déroulant très simple d'emploi

5/5 (1 avis)

Snippet vu 43 999 fois - Téléchargée 29 fois

Commenter

Contenu du snippet

Après m'être battu pendant deux jours avec des codes tout fait pour des menus déroulants et sans connaître JavaScript, ne trouvant pas ce que je voulais ou alors de véritables usines à gaz, j'ai réalisé ce petit script qui me donne satisfaction.
A chacun de l'utiliser à sa façon.

Source / Exemple : 


// JavaScript Document

var menu = new Array();
menu[0]="<ul><li>1.1</li><li>1.2</li></ul>";
menu[1]="<ul><li>2.1</li><li>2.2</li></ul>";
menu[2]="<ul><li>3.1</li><li>3.2</li><li>3.3</li><li>3.4</li></ul>";
menu[3]="<ul><li>4.1</li><li>4.2</li></ul>";

var liste;

var ancIndex=-1;
var ancLigne="";

function init()
{
	liste=document.getElementById("menu").getElementsByTagName("Li");
}

function debut(i)
{	
			if (ancIndex>=0)
			{
				liste[ancIndex].innerHTML=ancLigne;
			}
			ancLigne=liste[i].innerHTML
			ancIndex=i;
			liste[i].innerHTML+=menu[i];
}

Conclusion :


A utiliser dans un document HTML de ce genre

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript" src="code.js"></script>

</head>

<body onLoad="init()">
<p align="center">
<font face="Arial" size='10' color='#000000'>
<strong>MENU</strong>
</font>
</p>

<div id="menu">
<ul>
<li><a href="#" onClick="debut(0)">1</a></li>
<li><a href="#" onClick="debut(1)">2</a></li>
<li><a href="#" onClick="debut(2)">3</a></li>
<li><a href="#" onClick="debut(3)">4</a></li>
</ul>
</div>
</body>
</html>

A voir également

Ajouter un commentaire Commentaire
salhaouikhadija Messages postés 2 Date d'inscription lundi 2 avril 2007 Statut Membre Dernière intervention 19 octobre 2007
19 oct. 2007 à 10:25
et oui superbe mici bp
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.

Du même auteur (Patrice H)