Menu dynamique multiniveaux, multifonctions,
5/5 (85 avis)
Vue 112 834 fois - Téléchargée 7 516 fois
Description
Menu visitable à cette adresse :
http://moncastel.9online.fr/menu_deroulant
Comment l'utiliser pour vous ?
1 - Construire votre menu en HTML avec les balises <ul> et <li> avec des liens dans chaque li : <a href="#">description<a>. # à remplacer, par la suite avec votre lien hypertexte réel.
2 - ajouter dans le head :
<link rel="stylesheet" type="text/css" media="screen" href="menu.css" />
<script type="text/javascript" src="menu.js"></script>
3 - ajouter id="menu" dans le premier tag ul
4- fonction initMenu( id_menu,class du menu ) à
ajouter dans la balise body : <body onload="initMenu( 'menu','mh' )">
mh = style horizontal
vg = style vertical à gauche
vd = vertical à droite
5- éventuellement, ajouter id="ancre_menu" dans l'élément dans lequel, le menu viendra se coller.
Il est préférable de mettre un doctype valide en en tête du fichier HTML.
http://moncastel.9online.fr/menu_deroulant
Source / Exemple :
<!--// Michel Deboom septembre 2004 menu largeur auto,flèches txt
var delai,menu,dul,db,class_menu;pause=1500;D=document;wul1=0;
ie=D.all?1:0;op=window.opera?1:0;dtd=D.compatMode=="CSS1Compat"?1:0;
// paramétrage :
// flèches pour niveau horizontal, vertical ou vertical à droite
flh='...'; flg='?'; fld='?';
flc=ie?4:8 ;// espace pour la flèche
//correction bug padding+border ie et opéra non dtd
da=10 // des liens
dul=(ie&!dtd)?4:0; // des ul
danc=(ie&!dtd)?10:0;// hauteur du div "ancre_menu"
function initMenu(id_menu,class_menu){
de=ie&!op&&dtd?D.documentElement:D.body //exception IE6 dtd
fx=ie&!op?de.clientWidth:innerWidth-20 //l fenêtre
menu=D.getElementById(id_menu);
wul=[] // tableau des largeurs de sous-menus
as=menu.getElementsByTagName('a');
sousMenu=menu.getElementsByTagName('ul');
elem=document.getElementsByTagName('select');
// ajoute a href="#" dans les li sans lien .
lis=menu.getElementsByTagName('li');
for(i=0;i<lis.length;i++){var L=lis[i];
if(L.firstChild.tagName!="A"){
titre=L.firstChild.data;L.removeChild(L.firstChild);
L.innerHTML='<a href="#">'+titre+'<\/a>'+L.innerHTML;L.className="titre"
}
else L.className="lien" // avec url
}
//ajoute un id aux sous-menus
for(j=0;j<sousMenu.length;j++){sousMenu[j].id="ul"+j;wul[j]=0
}
//construction du menu :
for(i=0;i<as.length;i++){
lien=as[i];wa=lien.offsetWidth;
smenu=lien.parentNode.getElementsByTagName('ul')[0]?1:0;
if (smenu)wa+=flc;
// 1er niveau horizontal
if(lien.parentNode.parentNode.id==id_menu){
if(class_menu=="mh"){if(smenu&&lien.innerHTML!="")lien.innerHTML+=flh;
wa=lien.offsetWidth;wul1+=wa+da;
}
else { // vertical
if(wa>wul1){wul1=wa+da;};
// ajoute les fléches
if(smenu){lien.innerHTML=(class_menu=="vd")?'<span class="fl">'+fld+'</span>'+
lien.innerHTML:lien.innerHTML+'<span class="fl">'+flg+'</span> ';}
}
}
//autres niveaux verticaux
else {
n=eval(lien.parentNode.parentNode.id.substr(2,2));
if(wa>wul[n]){wul[n]=wa;};
// ajoute les fléches
if(smenu)lien.innerHTML=(class_menu=="vd")?'<span class="fl">'+fld+'</span>'+
lien.innerHTML:lien.innerHTML+'<span class="fl">'+flg+'</span> ';
}
//ajoute les évènements.
lien.onmouseover=lien.onfocus=function(){
ul_parent=this.parentNode.parentNode;
ul=this.parentNode.getElementsByTagName('ul')[0]
ef(ul_parent); // cache tout après l'ul parent
if(ul){ul.style.visibility="visible";// montre l'ul enfant
(class_menu=="vd")?ul.style.right="100%":
(class_menu=="mh"&&ul_parent.id!=id_menu)||(class_menu=="vg")?ul.style.left="100%":0;
this.className="suivi"; // marquage du suivi de lien
voirSelect('hidden');
}
}; lien.onmouseout=function(){delai=setTimeout('eftout()',pause)};
}
//fixe la largeur du 1er menu :
if(wul1)menu.style.width=wul1+dul+"px";
//largeur des sous-menu verticaux et de leurs liens :
for(var x=0;x<wul.length;x++){
ula=sousMenu[x].getElementsByTagName('a');dda=(ie&!dtd)?da:0;
for(var i=0;i<ula.length;i++){ula[i].style.width=wul[x]+dda+"px";
}
sousMenu[x].style.width=wul[x]+da+dul+"px";
}
lien.onblur=D.onclick=eftout // pour navigation clavier IE
menu.className=class_menu; //activation retardée de la feuille de style
// replace les flèches des menus verticaux au bons endroits.
span = menu.getElementsByTagName('span');
for(i=0;i<span.length;i++){A=span[i].parentNode;c=span[i].style;
if(span[i].className=="fl"){
c.top=A.offsetTop+2+"px";c.left=(class_menu=="vd")?4+"px":A.offsetWidth-8+"px";
}
}
ancremenu();
}
function ancremenu(){ancre=D.getElementById('ancre_menu');
if(ancre){
ancre.appendChild(menu);
with(ancre.style){
height=menu.offsetHeight+danc+'px';width=menu.offsetWidth+dul+'px';
}
}
}
function ef(ul) { //cache les uls qui suivent cet ul.
clearTimeout(delai);
var li=ul.getElementsByTagName('li');
for(i=0;i<li.length;i++){
var ul=li[i].getElementsByTagName('ul')[0];
if(ul){ul.style.visibility="hidden";
li[i].firstChild.className=""; //rétabli le marquage initial
}}}
function eftout(){ef(menu);voirSelect('visible');
menu.style.visibility="hidden";menu.style.visibility="visible";// bug ie
}
// bug ie corrigé : cache les <select> quand le menu est visible
function voirSelect(v){
if(ie&!op){for(i=0;i<elem.length;i++)elem[i].style.visibility=v;}
}
//-->
Conclusion :
Comment l'utiliser pour vous ?
1 - Construire votre menu en HTML avec les balises <ul> et <li> avec des liens dans chaque li : <a href="#">description<a>. # à remplacer, par la suite avec votre lien hypertexte réel.
2 - ajouter dans le head :
<link rel="stylesheet" type="text/css" media="screen" href="menu.css" />
<script type="text/javascript" src="menu.js"></script>
3 - ajouter id="menu" dans le premier tag ul
4- fonction initMenu( id_menu,class du menu ) à
ajouter dans la balise body : <body onload="initMenu( 'menu','mh' )">
mh = style horizontal
vg = style vertical à gauche
vd = vertical à droite
5- éventuellement, ajouter id="ancre_menu" dans l'élément dans lequel, le menu viendra se coller.
Il est préférable de mettre un doctype valide en en tête du fichier HTML.
Codes Sources
A voir également
- Menu dynamique multiniveaux, multifonctions,
- Menu en c - Forum C
- Menu php ✓ - Forum PHP
- Allocation dynamique tableau 2d c ✓ - Forum C
- Template site web dynamique php - Conseils pratiques -PHP
- Tableau dynamique php - Forum PHP
14 mars 2004 à 10:04
15 mars 2004 à 00:44
15 mars 2004 à 10:53
cordialement
22 mars 2004 à 12:23
- pourquoi faire un test IE/Netscape ? A priori les fonctions du type element.onmouseover, element.onblur, etc. sont compatibles quelle que soit la version du navigateur
- il serait plus correcte d'ajouter une classe sur les éléments qui servent à cacher la ponctuation, par exemple class="separator", "marker", "ponctuation", "hide", etc. pour pouvoir utiliser d'autres éléments dans le menu
- je pense que ce serait plus lisible de trouver deux noms différents plutôt que #menu et .menu qui n'est pas très clair, p.ex #menu et .sous-menu
A part ça, le script a l'avantage d'être très léger puisque le positionnement des sous-menus se fait dans la CSS et non dans le script, ce qui en plus évite des incompatibilités entre navigateurs (j'en sais quelque chose ;)
29 mars 2004 à 11:18
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.