Menu arborescent par listes déroulantes

Ce menu permet de placer énormément de liens en occupant un espace très limité sur la page.
Le principe est d'afficher dans les listes une sélection de plus en plus fine selon les choix faits dans les listes en amont.
Il est possible de définir jusqu'à 4 niveaux de listes.
Vous pouvez utiliser ce menu avec ou sans frames.

Pour information, voici l'arborescence du menu complet :

 

 

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
// Script développé par Tout JavaScript.com - http://www.toutjavascript.com

var menu=new CreerMenu(3," **** 1 - Choisir un thème **** "," **** 2 - Choisir un sujet **** "," **** 3 - Choisir un site **** ","titre 4","_blank");
// CreerMenu(Nb de listes, titre1, titre2, titre3, target)
// Nb listes=4 maxi
// Les 4 titres sont obligatoires (meme si Nb_liste<4)
// target=nom de la frame ou "self" si c'est la fenetre elle meme, "_blank" pour une nouvelle
// Pour ajouter les liens dans les listes, utiliser menu.Add
// Menu.Add(numéro de la liste, texte, page à charger)
menu.Add(1,"Internet","");
menu.Add(2,"Création de sites","");
menu.Add(3,"Tout JavaScript.com","http://www.toutjavascript.com");
menu.Add(3,"All HTML","http://www.allhtml.com");
menu.Add(3,"Praktica","http://www.praktica.com");
menu.Add(2,"Graphismes","");
menu.Add(3,"ZoneGifs","http://www.zonegifs.com");
menu.Add(3,"GoGraph","http://fr.gograph.com");
menu.Add(2,"Hébergement","");
menu.Add(3,"Free.fr","http://www.free.fr");
menu.Add(3,"Multimania","http://www.multimania.fr");
menu.Add(3,"Chez","http://www.chez.com");

menu.Add(1,"Matériel","");
menu.Add(2,"Documentation","");
menu.Add(3,"Hardware.fr","http://www.hardware.fr");
menu.Add(3,"Choix PC","http://www.choixpc.com");
menu.Add(3,"VTR Hardware","http://www.vtr-hardware.com");
menu.Add(2,"Enchères","");
menu.Add(3,"IBazar","http://www.ibazar.fr");
menu.Add(3,"Aucland","http://www.aucland.fr");
menu.Add(2,"Fabricants","");
menu.Add(3,"Intel","http://www.intel.fr");
menu.Add(3,"AMD","http://www.amd.com");
menu.Add(3,"Macintosh","http://www.apple.com/fr");


function CreerMenu(profondeur,titre1,titre2,titre3,titre4,target) {
this.nb=0;this.prof=profondeur;
this.titre1=titre1; this.titre2=titre2; this.titre3=titre3; this.titre4=titre4; this.target=target
this.Add=AddObjet;
this.Aff=AffMenu;
}
function AddObjet(deep,txt,page) {
var rub = new Object;
rub.deep=deep;
rub.txt=txt;
rub.page=page;
this[this.nb]=rub;
this.nb++;
}
function AffMenu() {
var Z="<FORM name='mf'>";
Z+="<SELECT size=1 name='list1' onChange='Clic(1)'><OPTION selected>"+this.titre1+"</OPTION>";
for (var i=0;i<this.nb;i++) {
if (this[i].deep==1) {
Z+="<OPTION value='"+i+"'>"+this[i].txt+"</OPTION>"
}
}
Z+="</SELECT>";
for (var i=2;i<=menu.prof;i++) {
Z+="<SELECT name='list"+i+"' onChange='Clic("+i+")'><OPTION>"+eval("menu.titre"+i)+"</OPTION><OPTION></OPTION><OPTION></OPTION><OPTION></OPTION>
<OPTION></OPTION><OPTION></OPTION></SELECT>";
}
Z+="</FORM>";
document.write(Z);
}
function add() {
var c=new Option("ADD","",true,true);
document.forms[0].elements["list"].options[0]=c;
}
function Clic(no) {
var valeur=document.forms["mf"].elements["list"+no].options[ document.forms["mf"].elements["list"+no].selectedIndex].value;
if ((valeur!="")&&(valeur!=null)&&(no<menu.prof)) {
var deep=menu[valeur].deep;
var no2=1;
for (var noX=(no+1);noX<=menu.prof;noX++) {
document.forms["mf"].elements["list"+eval(noX)].options.length=0;
var titre=eval("menu.titre"+noX);
var c=new Option(titre);
document.forms["mf"].elements["list"+(noX)].options[0]=c;
document.forms["mf"].elements["list"+(noX)].selectedIndex=0;
}
valeur++;
for (var i=valeur;i<menu.nb;i++) {
//alert(i);
if (menu[i].deep==deep+1) {
//alert("no="+no+" texte="+menu[i].txt);
var c=new Option(menu[i].txt,i);
document.forms["mf"].elements["list"+(no+1)].options[no2]=c;
no2++;
} else { if (menu[i].deep==deep){i=menu.nb;}}
}
document.forms["mf"].elements["list"+(no+1)].options.length=no2+1;
document.forms["mf"].elements["list"+(no+1)].selectedIndex=0;
Clic(no+1)
valeur--;
}
if ((valeur!="")&&(valeur!=null)) {
var page=menu[valeur].page;
if ((page!="")&&(page!=null)) {
if (menu.target=="self") {window.location=page}
else if (menu.target=="_blank") {window.open(page,"","menubar,scrollbars,toolbar,status,location")}
else {parent.frames[menu.target].location.href=page;}
}
}
}
// Fonctions destinées à afficher l'arborescence du menu
function space(i) {var Z="";for (var j=0;j<i;j++){Z+="&nbsp;&nbsp;&nbsp;&nbsp;";}return Z}
function Arbo(m) {
var Z="<BR>";
for (var i=0;i<m.nb;i++) {
Z+=space(m[i].deep)+m[i].txt+"&nbsp;&nbsp; <A href='"+m[i].page+"'>"+m[i].page+"</A><BR>"
}
document.write(Z);
}
// Section utile pour la démonstration

</SCRIPT>
</HEAD>

<Body>

<SCRIPT language="JavaScript">
menu.Aff();
</SCRIPT>

</Body>