Amélioration du menu déroulant très simple posté il y a quinze jours

Soyez le premier à donner votre avis sur cette source.

Snippet vu 9 487 fois - Téléchargée 28 fois

Contenu du snippet

Dans le menu que j'avais présenté il y a quelques temps, si on recliquait sur une rubrique déjà déroulée, rien ne se passait. j'ai modifié légèrement le code pour que cette action ré-enroule le menu.

voici ce code modifié

Il faut l'enregistrer dans un fichier javascript de nom "code.js"

A utiliser comme précédemment :

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>
</ul>
</div>
</body>
</html>

Source / Exemple :


// JavaScript Document 
   
var menu = new Array(); 
menu[0]="<ul><li><a href='document 1-1.htm'>1.1</a></li><li><a href='document 1-2.htm'>1.2</a></li></ul>"; 
menu[1]="<ul><li><a href='document 2-1.htm'>2.1</a></li><li><a href='document 2-2.htm'>2.2</a></li></ul>"; 
  
var liste; 
  
var flag = new Array(); 
  
var ancIndex=-1; 
var ancLigne=""; 
  
function init() 
{ 
    liste=document.getElementById("menu").getElementsByTagName("Li"); 
    for(var i=0 ; i < liste.length ; i++) 
    { 
            flag[i]=0; 
    } 
} 
  
function debut(i) 
{     
    if (flag[i]==0) 
    { 
                if (ancIndex>=0) 
                { 
                    liste[ancIndex].innerHTML=ancLigne; 
                    flag[ancIndex]=0; 
                } 
                ancLigne=liste[i].innerHTML 
                ancIndex=i; 
                liste[i].innerHTML+=menu[i]; 
                flag[i]=1; 
    } 
    else 
    { 
            liste[i].innerHTML=ancLigne; 
            ancIndex=-1; 
            ancLigne=""; 
            flag[i]=0; 
    }         
             
}

A voir également

Ajouter un commentaire

Commentaires

areverse
Messages postés
15
Date d'inscription
jeudi 4 septembre 2003
Statut
Membre
Dernière intervention
20 avril 2006
-
Excellent ! Et excellentissime de par la simplicité.
Je l'ai repris en pointant des éléments DIV dans une TABLE, morceau très appréciable pour notre petit intranet.
Seul ennui : chaque liste déroulante doit tenir sur une seule ligne de javascript (en fait, je constitue cette ligne unique à la fin de la mise au point de ma liste déroulante). Les modifications de telles listes peuvent être lourdes.
Y aurait-il un moyen d'appeler plutôt un petit fichier via une URL ?
cs_gyatso
Messages postés
1
Date d'inscription
dimanche 28 novembre 2004
Statut
Membre
Dernière intervention
31 janvier 2007
-
une question avant de me lancer dans ce code (je suis débutante): est ce que ce type de menu permet de choisir non seulement dans la liste proposée, mais d'entrer également une valeur différente qui ne serait pas proposée dans le liste? Je cherche à insérer ce type de menu dans une page html... avez vous une suggestion?
Merci pour votre aide !
Gyatso

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.