Menu select multiniveaux

Soyez le premier à donner votre avis sur cette source.

Vue 12 613 fois - Téléchargée 1 146 fois

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

Ajouter un commentaire Commentaires
jimmylefou Messages postés 1 Date d'inscription mardi 4 juillet 2006 Statut Membre Dernière intervention 17 juillet 2007
17 juil. 2007 à 21:05
bonjour.
je te remercie de ce code c'est ce que je cherchais :)
seulement, j'aimerais savoir si il est possible sans changer "tout le code" de faire pour qu'a chaque nouvelle liste, un retour a la ligne soit effectué...
jravouna Messages postés 1 Date d'inscription mercredi 22 décembre 2010 Statut Membre Dernière intervention 21 novembre 2006
21 nov. 2006 à 10:14
Super code ! jai modifier la création du select avec un sel[j].multiple='multiple';
mais a par ca, exellent et très simple d'utilisation. Bravo !
chimelpremier Messages postés 544 Date d'inscription vendredi 5 décembre 2003 Statut Membre Dernière intervention 20 mai 2005
11 mars 2005 à 09:50
pas convaincu ? pour l'accessibilité ou l'utilité?
Merci d'argumenter loutre74
cordialement
loutre74 Messages postés 5 Date d'inscription samedi 26 février 2005 Statut Membre Dernière intervention 10 mars 2005
10 mars 2005 à 20:19
mmouais ca m a pas convaincu enfin si tu pourrais commenter un peu plus ca serait bien ....
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)