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

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

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)