Menu dynamique multiniveaux, multifonctions,

Soyez le premier à donner votre avis sur cette source.

Vue 112 336 fois - Téléchargée 7 453 fois

Description

Menu visitable à cette adresse :
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

Ajouter un commentaire Commentaires
Messages postés
1
Date d'inscription
mercredi 27 décembre 2006
Statut
Membre
Dernière intervention
28 janvier 2009

Bonjour,

Je suis en train de tester votre menu que j'ai adapté pour le futur site que je développe.
J'ai un souci de chargement, en fait le chargement de la page est un peu long à cause d'un plan google maps inseré à la page et qui met du temps. Pendant ce laps de temps, ma liste du menu apparait en bas de la page, pour aller ensuite dans le menu. N'est il pas possible de la cacher avant le chargement complet de la page ?

Voici le lien : http://matduchesne.free.fr/chaussuresbourgeois.com
Messages postés
2
Date d'inscription
samedi 24 novembre 2007
Statut
Membre
Dernière intervention
26 novembre 2007

Après quelques heures de recherche j'ai compris. Merci quand même. Je profite de l'occasion pour tenter d'expliquer aux personnes intéressées qui sont novice comme moi.

Donc en fait dans tous les fichiers HTML fournis ici qui ont un menu, vous trouverez une section à la fin intitulée "<!-- #BeginLibraryItem "/Library/liste.lbi" -->". Cette section est en fait une reproduction du contenu du fichier "liste.lbi". Dreamweaver semble en fait reproduire le menu dans chacun des fichiers HTML. Donc en effectuant une modification dans le fichier "liste.lbi" via Dreamweaver, le logiciel fait les modifications dans tous les fichiers HTML. 1 modification pour tous vos fichiers.

Si vous ne trouvez pas le fichier "liste.lbi", c'est normal. chimelpremier n'a pas inclut ce fichier. Vous pouvez le recréer avec Dreamweaver.

Merci et bonne chance.
Denis
Messages postés
2
Date d'inscription
samedi 24 novembre 2007
Statut
Membre
Dernière intervention
26 novembre 2007

Bonjour

Si me fis au commentaires sur cette page et sur le peu de connaissance que j'ai dans le domaine, je viens de trouver le menu que je recherche. Toutefois il y a un élément que j'aimerais comprendre. Est-il possible que la source du menu ne soit pas inclus dans la page HTML. Cela a pour but d'avoir 1 et 1 mise à jour pour toutes les pages de mon site.

Merci à l'avance.
Denis
Messages postés
1
Date d'inscription
vendredi 30 mars 2007
Statut
Membre
Dernière intervention
4 mai 2007

Bonjour,

est-ce que qq'un pourrait apporter de l'aide à la bille que je suis ???

j'avais réussi je ne sais meme plus comment à installer ce menu en vertical gauche, mais je pense qu'en fait il rendrait mieux en horizontal pour mon site, donc j'ai juste changé la valeur, mais maintenant les menus déroulants au lieu d'apparaitre sous les titres apparaissent au bout à droite du menu. Je n'arrive pas à trouver le paramètre qu'il faut changer help.
Messages postés
2
Date d'inscription
mardi 16 janvier 2007
Statut
Membre
Dernière intervention
27 mars 2007

RE bonjour, c'est bon j'ai trouver, j'avais oublier de mettre dans mon fichier index.php :
merci quand même.
Afficher les 85 commentaires

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.