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
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.