Menu select multiniveaux

Télécharger le projet
Commenter

Description

Construisez une liste à puce accessible à tous et aux moteurs de reccherche.

Le script fait le reste

Source / Exemple : 


<!--// Michel Deboom mars 2005 menu select accessible multiniveaux
D=document;
sel=[]; //tableau des éléments select
opt=[]; //tableau des éléments option
dtd=D.compatMode=="CSS1Compat"?1:0;

function initMenu()
{
ancre=D.getElementById('ancre_menu') // élément contenant le nouveau menu
menu1=D.getElementById('menu'); // ancien menu
menu1.style.display='none'// cache le menu d'origine
new_menu=D.createElement('form'); //création du nouveau menu
new_menu.className="new_menu"
ancre.appendChild(new_menu); // collé dans ancre
sousMenu=menu1.parentNode.getElementsByTagName('ul'); //tableau des sous-menus
max=menu1.getElementsByTagName('ul').length // nb de sous-menus - 1
for(j=max;j>=0;j--)
  {
  sel[j]=D.createElement('select');    
  new_menu.appendChild(sel[j]); //ajoute un élément select
  if(window.Event)sel[j].onmouseup=function(){af(this)}; // évènement ajouté gecko Opéra
    else sel[j].onclick=function(){af(this)} //ie
  sousMenu[j].id=sel[j].id="sel"+j; // id ajoutée
  lis=sousMenu[j].getElementsByTagName('li'); // tableau des li par sous-menu
  for(var i=0;i<lis.length;i++)
    {var L=lis[i];
    if(L.className!="vu") // pour lire une seule fois chaque li
      {
      opt[i]=D.createElement('option');
      L.className="vu";    
      sel[j].appendChild(opt[i]); // élément option ajouté
      if(L.firstChild.tagName=="A") // contient un lien
        {
        opt[i].value=L.firstChild.href //transforme le lien
        opt[i].innerHTML=L.firstChild.innerHTML;// ajoute le contenu du li
        opt[i].className="lien" // dans la feuille de style
        }
      else 
        {
        opt[i].innerHTML=L.firstChild.data
        opt[i].className="rub" // dans la feuille de style
        opt[i].value='#' //lien inactif
        smenu=L.getElementsByTagName('ul')[0]
        if(smenu)
          {
          opt[i].value=smenu.id
          D.getElementById(smenu.id).style.display='none';
          D.getElementById(smenu.id).style.position='absolute';
          }          
        }
      }
    }
  }
}

function af(obj){
if(obj.style.display!='none') //un seul niveau ouvert
  {
  for(var i=obj.id.substr(3,2);i<max;i++)D.getElementById('sel'+i).style.display='none';
  obj.style.display='inline'
  }
if(obj.value.substr(0,3)=='sel') //sous-menu éxistant ?
  {
  D.getElementById(obj.value).style.left=obj.offsetWidth+obj.offsetLeft+'px'//positionne le sous-menu
  D.getElementById(obj.value).style.display='inline'
  }
else location=obj.value
}
//-->

Conclusion :


Reste à mettre au point une feuille de style qui marche sur Gecko, Opéra et les autres
Télécharger le projet

Codes Sources

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 (chimelpremier)