begin process at 2012 02 14 09:09:50
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Menu & Co

 > MENU DYNAMIQUE MULTINIVEAUX, MULTIFONCTIONS,

MENU DYNAMIQUE MULTINIVEAUX, MULTIFONCTIONS,


 Information sur la source

Note :
9,5 / 10 - par 14 personnes
9,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Menu & Co Niveau :Débutant Date de création :14/03/2004 Date de mise à jour :07/12/2005 12:26:59 Vu / téléchargé :105 100 / 6 992
Auteur : chimelpremier

Ecrire un message privé
Site perso
Commentaire sur cette source (85)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
Menu visitable à cette adresse :
http://moncastel.9online.fr/menu_deroulant


Source

  • <!--// 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;}
  • }
  • //-->
<!--// 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.


 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

12 juillet 2004 00:49:52 :
Optimisation des largeurs de sous-menus. Modification du menu vertical à droite. futures options prévues : choix du style et des couleurs par l'utilisateur. Si j'y arrive bien sûr !!
12 juillet 2004 13:14:40 :
correction bug
18 juillet 2004 01:47:59 :
abandon du chemin ajouté une page "quirk" simplifié le js plus qu'1 seul fichier style pour 3 styles
20 juillet 2004 03:22:58 :
Apparition au changement de page resolution de bug sur navigation clavier
26 juillet 2004 21:39:02 :
version avec flèches texte sans image d'arrière-plan
29 juillet 2004 02:07:14 :
Comme on m'a dit que ça plantait sur Konqueror, j'ai remplacé les innerHTML par des padding et width sur le menu image, peut-être mieux acceptés. Si qqun peut vérifier sur linux et mac ? La version texte continu à utiliser innerHTML.
29 juillet 2004 23:31:22 :
une correction de plus, ça vient bon. ESt-ce qu'un linuxien peut testé sur Konqueror ou Atari ?
30 juillet 2004 12:46:43 :
Testez SVP !!!
18 septembre 2004 05:13:31 :
ajout : - préférences du visiteur - 4 menus - cacher les selects
15 janvier 2005 04:11:16 :
Simplification. Plus qu'un type de menu avec les flèches au format texte.
17 janvier 2005 13:52:24 :
Correction bug, intégration du menu droit et gauche dans un tableau au pixel prés, avec une petite entorse aux standards.
17 janvier 2005 13:57:13 :
modif du js
05 mars 2005 03:13:36 :
ajouté une class pour les liens avec url amélioré le style
07 mars 2005 13:05:18 :
Ajouté la class "titre" pour différencier les liens réels des titres du menu
07 décembre 2005 12:27:00 :
Pas 100 % accessible .

 Sources du même auteur

Source avec Zip Source avec une capture MENU SELECT MULTINIVEAUX
Source avec Zip Source avec une capture ROLLOVER D'IMAGES AUTOMATIQUE
Source avec Zip Source avec une capture MENU EXPANSIF, MULTINIVEAUX
Source avec Zip Source avec une capture QUIZZ AVEC GLISSÉ DÉPOSÉ D'OBJETS COMPATIBLE (DRAG&DROP) .
Source avec Zip MENU MULTIFONCTIONS, ACCESSIBLE
Toutes les sources de chimelpremier

 Sources de la même categorie

Source avec Zip Source avec une capture UN MENU EN CSS par Julien39
Source avec Zip FLÈCHE CLIGNOTANTE AU SURVOL D'UN LIEN par lecurieux41
Source avec Zip Source avec une capture TREEMENU-2.3.6-MACNIP par neep
Source avec Zip Source avec une capture MENU CIRCULAIRE par adelmonis
Source avec Zip Source avec une capture MENU TASKBAR WINDOWSXP HOME par micking
Toutes les sources de la catégorie Menu & Co

Commentaires et avis

Commentaire de nanarchiste le 14/03/2004 10:04:13

Alors la j'hésite moi G un logiciel "123 Menu" qui fait exactement pareil donc je sai pas koi dire

Commentaire de chimelpremier le 15/03/2004 00:44:53

Je ne connait pas. Vous avez une adresse ou on peut voir ce logiciel nanarchiste?

Commentaire de chimelpremier le 15/03/2004 10:53:36

N'hésite plus, nanarchiste, cool ce logiciel, mais il lui manque l'accessiblité et de la modularité.
cordialement

Commentaire de Gudzu le 22/03/2004 12:23:07

Ce menu est très bien :) Parmi les détails que je peux relever :
- 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 &lt;span&gt; qui servent à cacher la ponctuation, par exemple class="separator", "marker", "ponctuation", "hide", etc. pour pouvoir utiliser d'autres éléments &lt;span&gt; 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 ;)

Commentaire de amosc le 29/03/2004 11:18:08

bravo !! pratique compact rapide .... et encore merci

Commentaire de chimelpremier le 29/03/2004 13:28:01

Merci de vos commentaires.
Gudsu, le script est basé sur le DOM2 pour satisfaire aux directives du W3C et modifié pour s'adapter à IE5/6, d'ou la détection IE/GECKO.
D'accord pour la class sur &lt;span&gt;. Je voudrait être sûr que la ponctuation soit necessaire comme le préconise :
http://openweb.eu.org/articles/menu_universel/annexes/etape3.htm
Quelqu'un possédant un navigateur à synthèse vocale pourrait-il m'informer ?
Et pour la classe .menu, je compte intégrer la partie style du menu dynamique dans le script.
Prochaine étape : dimension et position automatique des sous-menus.
cordialement
Michel

Commentaire de romalafrite le 18/04/2004 21:21:34

Très bonne idée que celle-ci, cela permet de faire un menu simplement en n'ayant qu'à intégrer le JS, celuici transformant nos vulgaires &lt;ul&gt; et autres &lt;li&gt; en élements de menu. Rien à redire. (note: je suis pas une référence)

Commentaire de amosc le 17/06/2004 13:17:37

Salut  j ai tester ton menu et c est genial pratique compact rapide a mettre en place et pas trop lourd .... bref encore bravo

Mais voila defois il deconne juste sur un niveau !

Je l ai tester sur plusieur poste, il se trouve en bas à gauche mais defois il se trouve un peu plus decaler ver la droite et sur d autre poste c est vers la gauche bizar non ! encore plus bizar que se soit le meme version IE 6 sur chaque poste !!

As tu rencontre les meme probleme !!

Merci d avance ...

Amosc

ps : vive l'OpEnsOurcE ...

Commentaire de chimelpremier le 24/06/2004 02:06:27

Je n'ai pas rencontré ce problème mais je viens de faire une nouvelle version plus élaborée à tester :
http://www.javascriptfr.com/code.aspx?ID=23955

Commentaire de tryskehl le 07/07/2004 15:33:57

C'est con que je n'ai pas trouvé ton menu avant faire le mien!!

Commentaire de tryskehl le 08/07/2004 11:56:20

J'ai testé ton script sous Linux avec Konqueror 3.1.4, il y a juste un petit bug d'affichage. Le menu suit la scrollbar sans problème. Tous les niveaux sont créés. Le bug vient du fait que tu n'as pas du précisé de largeur pour tes cellules et les premières cellules sont reduites à 1 caractère. Pour les sous menu le problème disparait.

Commentaire de Gudzu le 12/07/2004 14:26:50

J'ai essayé sous Mac IE mais le menu ne s'affiche pas.

Je ne sais pas pourquoi...

Commentaire de chimelpremier le 12/07/2004 22:49:42

Merci pour vos tests, j'ai fait pas mal de modifs, ces derniers temps. Avez-vous testé avec le zip ou le site . Côté site, ça déconne en ce moment .
Le zip a été remis à jour ce midi, car j'avais aussi un blème avec IE5.0 win.
Y a encore du pain sur la planche

Commentaire de Gudzu le 13/07/2004 17:56:13

C'est le site qui ne marchait pas avec Mac IE 5. Avec le Zip ça marche très bien :)

Commentaire de dexterovitch le 18/08/2004 11:31:29

bein n'étant pas un gourou du javascript même que c'est un monde inconnu chez moi avec le CSS mais j'apprecie surtout l'algorithme :c) c'est facile a comprendre pour le test j'ai pas encore installer mon poste linux dans la société! donc pour le test sa doit attendre mais je te dis que c'est du tout bon exellent!

Commentaire de zbe le 03/12/2004 11:53:31

bonjour,

ou se trouve le code qui decale le menu sur la droite de la page.(css)

Merci.

Commentaire de chimelpremier le 03/12/2004 14:33:40

zbe, dans le source
dans commun.js :
changer pour cl1="vd"
Le style est dans la class .vd située dans menu.css

Prochainement une nouvelle version sans le choix utilisateur qui perturbe

Commentaire de zbe le 03/12/2004 15:23:12

Alors il y a une marge cote gauche je voudrais faire un pargin 0 mais impossible les 3 seuls includ que j'ai dans mes page voici
<script type="text/javascript" src="mb.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="mbv.css" />
<link rel="stylesheet" type="text/css" media="screen" href="mbh.css" />

donc comment faire help help.
:-)

Commentaire de chimelpremier le 03/12/2004 16:02:53

hola!! c'est une trés vieille version, je n'ai rien gardé dessus et elle n'est pas de moi !, tu as une url?

Commentaire de zbe le 03/12/2004 16:56:49

ok je test le nouveau.
je laisse tombe l'ancien.............!
allix.

Commentaire de xl714 le 09/12/2004 13:33:05

Bonjour, excellent ton menu, je m'en sert pour mon site:
http:xl714.free.fr/
et je l'utilise pour le rendre encore plus dynamique ici:
http://www.phpcs.com/code.aspx?ID=24912
et ici pour l'exemple à tester en ligne:
http:xl714.free.fr/menu-dynamique/
Merci :) et @+.
Xavier

Commentaire de landrein le 13/12/2004 16:36:45

Bonjour

J'essaie d'utiliser ce menu en mettant des images pour le premier niveau de <li>, et en gardant du texte pour les niveaux suivants.
Est-il possible de ne plus avoir aucun bord autour des images (de façon à pouvoir les insérer au pixel près dans une interface graphique) sans boulversser l'agencement des niveaux de <li> inférieurs ? ?

Merci.
Anatole

Commentaire de chimelpremier le 13/12/2004 18:09:20

Landrein Dans la feuille de style, tu ajoutes :
#menu img{border:0}

Commentaire de chimelpremier le 15/12/2004 18:06:44

Désolé Landrein, c'est un menu expérimental, je n'ai pas prévu de le faire fonctionner sur une interface graphique.

4zel l'a adapté :
http://www.gameplus.fr.st

bon courage
Michel



Commentaire de titom52000 le 23/12/2004 14:05:23

Bonjour,

j'utilise le menu, il va super bien mais j'ai quelque problème d'optimisation.

Sous firefox la commande offsetWidth ne fonctionne pas
Ce qui provoque une mauvaise taille sur les sous menu.
En mettant en commetaire  la taille des sous menu cela fonctionne

Par contre sous IE la taille des sous menu est trop grand par rapport on contenu et si je le modifie cela mpasse sans problème.

Il y a t il une astuce pour optimiser la position des menu au premier niveau pour qu'il soit mis de manière proportionnel.

Merci

Commentaire de chimelpremier le 23/12/2004 17:40:26

offsetWidth est trés bien acceptée par Firefox. Il faudrait voir le code css qui pose problème pour répondre.
Cordialement
Michel

Commentaire de general_POPOV le 12/01/2005 18:29:39

Bonjour, j'essai d'ajouter le menu a mon site mais je ne suis pas capable de le mettre à la verticale. J'ai vu la variable qu'il faut changer dans le menu.js :

y=menu.offsetTop;
dy=y-sy;

mais même avec ces variables je ne suis pas capable de la mettre à la verticale, il reste à l'horizontal.

Merci d'avance

Commentaire de chimelpremier le 15/01/2005 04:18:57

general POPOV, je viends de mettre à jour le zip, je te conseil de le télécharger, car tu fait mention d'une ancienne version.

Commentaire de fg85 le 15/01/2005 10:43:32

Bon script, merci .

----------------------------
http://fg.logiciel.free.fr

Commentaire de general_POPOV le 17/01/2005 19:34:35

Merci beaucoup pour la mise a jour. Mais malheureusement le menu ne fonctionne toujours pas à la verticale gauche, a droite il fonctionne correctement, mais a gauche il devient extremement large et imcomprenable. Je voudrais bien te le montrer mais je ne peut pas coller de print screen. Pourrait tu m'indiquer ou je peux modifier le code pour la grosseur du menu ou bien le faire toi si tu comprend ce que je dit. Merci beaucoup.
général_POPOFV

Commentaire de general_POPOV le 17/01/2005 20:03:01

Finalement j'ai résolu mon problème tout seul, merci quand même. Très beau menu en passant.

général_POPOV

Commentaire de Yann1983 le 03/03/2005 16:28:14

bon code, facilement paramètrable.

Juste un petit problème: j'ai mis le menu a gauche et verticalement et j'ai une iframe au millieu de ma page.

Les liens du menu pointe dans cette iframe mais si le lien pointe sur un répertore windows. Le menu s'affiche derrière la iframe affichant le répértoire windows (au lieu de devant). Peux-on remedier a cela?

Commentaire de chimelpremier le 03/03/2005 22:11:03

Je n'ai pas testé avec une Iframe. Il faut passer par src et mon menu est conçu avec des liens href. Yan 1983, pourrais-tu montrer une url ou le code pour voir si on peut remédier ?

Commentaire de Yann1983 le 07/03/2005 09:10:08

Voila la page épurée. merci pour ton aide :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TITRE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" media="screen" href="menu/general.css" />
<link rel="stylesheet" type="text/css" media="screen" href="menu/menu.css" />
<script type="text/javascript" src="menu/menu.js"></script>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body class="style" bgcolor="#FFFFFF" link="#333366" vlink="#333366" alink="#333366" onload="initMenu('menu','vg')">
<table width="100%" border="0" bgcolor="#333366">
  <tr bgcolor="#333366">
    <td width="233" height="78"> <div align="left"><a href="lien" target="_blank"><img src="images/logo.gif" width="137" height="24" hspace="20" border="0" align="middle"></a></div></td>
    <td valign="middle"><div align="center"><img src="images/logo2.gif" width="400" height="70"></div></td>
    <td width="233"></td>
  </tr>
</table>

<!-- Début du Menu Principal de Gauche-->

<table width="100%" height="90%" border="0" bordercolor="#FFFFFF" bgcolor="#333366">
  <tr>
    <td width="200" height="90%" valign="top" bordercolor="#333366" bgcolor="#FFFFFF">
      <table width="100%" border="1" bordercolor="#FFFFFF" bgcolor="#333366">
        <tr>
          <td bgcolor="#333366"><div align="center"><font color="#FFFFFF" size="5"><strong>Menu</strong></font></div></td>
        </tr>
        <tr>
          <td bgcolor="#3399CC"><a href="main.htm" target="iframe"><strong><font color="#FFFFFF">Accueil</font></strong></a></td>
        </tr>

<!-- Début du menu Application -->

         <tr>
           <td bordercolor="#FFFFFF" bgcolor="#3399CC"><strong><font color="#FFFFFF">Applications</font></strong></td>
         </tr>
         <tr>
         <td id="ancre_menu" valign="top" style="padding:5px 5px 0 0" bordercolor="#FFFFFF" bgcolor="#FFFFFF"></td>
        </tr>

<!-- Début du Menu Interfaces -->


        <tr>
          <td bgcolor="#3399CC"><a href="interf.htm" target="iframe"><strong><font color="#FFFFFF">Divers</font></strong></a></td>
        </tr>
        <tr>
          <td bgcolor="#FFFFFF">SUPER TEST

   </td>
        </tr>



<!-- Début du Menu Documentation -->


        <tr>
          <td bordercolor="#FFFFFF" bgcolor="#3399CC"><strong><font color="#FFFFFF">Autres</font></strong></td>
        </tr>
        <tr>
          <td bordercolor="#FFFFFF" bgcolor="#FFFFFF">TEST</td>
        </tr>

       </table>
  </td>

<!-- Fin de la Partie de Gauche -->



<!-- Frame Central interne au tableau -->


    <td height="80%" valign="top" bgcolor="#FFFFFF">
      <iframe name="iframe" src="main.htm" height="100%" width="100%" frameborder="0"></iframe>
    </td>



<!-- Début du menu de liens -->


    <td width="170" height="90%" valign="top" bgcolor="#FFFFFF">
      <div align="left">
        <table width="100%" border="1" bordercolor="#FFFFFF" bgcolor="#333366">
          <tr>
            <td bgcolor="#333366"> <div align="center"><font color="#FFFFFF" size="5"><strong>Liens</strong></font></div></td>
          </tr>
        
<!-- Section Unicible -->


          <tr>
            <td bgcolor="#3399CC">
<table width="100%" border="0">
                <tr>
                  <td><font color="#FFFFFF"><strong>Unicible</strong></font> </td>
                
                </tr>
              </table></td>
          </tr>
               <tr>
            <td bgcolor="#FFFFFF"><ul>
                <li><a href="lien1" target="_blank">lien1</a></li>
                <li><a href="lient2" target="_blank">Liens2</a></li>
                <li><a href="lien3" target="_blank">lien3</a></li>
<li><a href="lien4" target="_blank">lien4</a></li>


<!--Exemple:<li><a href="adresse du lien" target="_blank ou iframe">texte affiché</a></li>  -->
              </ul>
              </td>
          </tr>

<!--Exemple:<li><a href="adresse du lien" target="_blank ou iframe">tex </ul>
              </td>te affiché</a></li>  -->
            


          </tr>
        </table>
      </div></td>
    </tr>


<!-- Fin du menu de liens -->



</table>


<!-- #BeginLibraryItem "/Library/liste.lbi" -->
<ul id="menu" >

<li>Front Arena
<ul>
<li><a href="lien sur répértoire" title="" target="iframe">Support</a> </li>
<li><a href="" title="" target="iframe">lien</a> </li>
<li><a href="" title="" target="iframe">lien</a> </li>
<li><a href="" title="" target="iframe">Liens lien</a> </li>
<li><a href="" title="" target="iframe">Projets</a> </li>
</ul>
</li>
<ul>


<!-- #EndLibraryItem -->
</body>
</html>

Commentaire de chimelpremier le 07/03/2005 11:51:30

Bonjour yann1983,
Marche chez moi. As-tu mis menu.js et menu.css dans le bon répertoire?
Ne mets pas general.css qui est ma mise en page, ni
<!-- #BeginLibraryItem "/Library/liste.lbi" --> qui est interne à dreamweaver 2 que j'utilise pour mettre en ligne

Commentaire de Yann1983 le 07/03/2005 12:34:10

cela marche chez moi également mais le problème que j'ai et que si c'est un répértoire Windows (et non une page html) qui s'affiche dans la iframe, le menu passe derrière la iframe et non devant!

a+

Commentaire de chimelpremier le 07/03/2005 13:47:17

Une Iframe reste une frame et on ne peut pas faire passer le menu par dessus qqsoit le type de lien.

Si tu n'as que 2 niveaux, tu peut décaler le 2ème niveau vers la gauche :

.vg ul{margin:-.4em 0 0 -4em}

dans menu.css par exemple

Commentaire de Yann1983 le 07/03/2005 14:28:17

Hello,

merci pour ta prompt réponse.

Si ma iframe contient une page html, pas de problème, par contre, si ma iframe contient un répértoire windows, le menu passe en dessous. Il  a donc bien une différence suivant ce que contient la iframe.

Je suis actuellement entrain de chercher un script affichant ce qu'il y a dans un dossier (répértoire) en html et pouvoir affichier le fichier selectionner dnasla iframe.

a+

Commentaire de Yann1983 le 07/03/2005 15:03:21

idem pour des fichiers .doc et .xls. Il faudrait donc que je trouve un système qui priorise l'affichage du html (javascript) plutot que les .doc ou autre fichier du même genre

any idea?

a+

Commentaire de Mourte le 11/03/2005 09:08:27

Hello,
Je dois dire que ton script est vraiment épatant! A part cool menu, qui fait quelque chose de très complet, ton menu est excellent! Plus léger, il m'a l'air compatible partout, vraiment pas mal du tout...

Par contre sais-tu si il est possible de le mettre dans un tableau afin de le disposer n'importe ou sur la gauche?

Par exemple pour un site fais avec des tableaux, et ou on voudrait intégrer juste le menu à un endroit précis?

Merci de m'éclairer et encore merci pour ton travail!

Mourte

Commentaire de chimelpremier le 13/03/2005 19:34:56

cool menu n'est pas accessible il me semble.

Pour mettre le menu dans un TD à gauche, tu as un éxemple avec ma page vg.htm :
- id="ancre_menu" dans la balise du TD
- <body  onload="initMenu('menu','vg')">
- Dans le fichier menu.css, tu modifies le style de ta cellule de tableau avec :
#ancre_menu{vertical-align:top;padding:5px 5px 0 0;margin:0}

Voilà mourte, j'espère que c'est suffisamment clair !
cordialement

Commentaire de Mourte le 13/03/2005 21:24:24

Merci pour ta réponse, en fait j'ai géré autrement, mais j'aime vraiment bien le script! Encore bravo, et merci mille fois.

Mourte

Commentaire de Mourte le 30/03/2005 18:28:42

Salut, j'en profite pour te poser encore une petite question... comment peut-on faire pour fixer la largeur de la première cellule à disons 200px?

Merci pour ta réponse.

Mourte

Commentaire de chimelpremier le 31/03/2005 10:18:59

La largeur de chaque sous-menu est fixée automatiquement.
Mourte,
dans menu.js, tu supprimes :

  //fixe la largeur du 1er menu :
  if(wul1)menu.style.width=wul1+dul+"px";

et dans menu.css, tu ajoutes:

.vg{width:200px}

Commentaire de rem78 le 16/04/2005 17:14:58

bonjour,
C'est dommage, qu'il n'y est pas plus d''explication pour les néophites comme moi qui aimerais bien pouvoir arriver à le personnaliser !!
Car actuellement c'est un vrai casse tête pour moi !!

rem78

Commentaire de chimelpremier le 17/04/2005 00:11:23

Pour moi aussi au point de vue CSS. C'est surtout IE et Opéra qui posent problème avec les padding et border appliqués au menu dynamique ou il faut compenser par des variables dul et da suivant qu'il y a Doctype ou pas. Il y a moyen d'éviter ces variables en appliquant padding, border, dimension des caractères au menu avant transformation, accessible par #menu. Je l'ai appliqué sur le menu de mourte :
http://www.ampcometal.com/devo/fr/

Commentaire de rem78 le 26/04/2005 17:14:39

Bonjour,

je voudrais savoir chimelpremier, si il y aurait un moyen d'avoir une doc concernant la marche à suivre pour transformer et personnaliser ton menu, car c'est loin d'être évident et c'est ce qui manque dans ton ZIP.
Je recherche à pouvoir intégrer ton menu horizontal (ton exemple de menus Dynamiques, Déroulant, avec 3 sous niveaux) dans la nouvelle version de mon site.

Merci de ta réponse.

Commentaire de PerfectSlayer le 08/06/2005 09:46:26

Euh.. désolé mais pour moi, le menu n'est pas déroulant sous FF(1.0.4) alors que sous IE tout est niquel....

Vous avez pas une petite idée du problème ? (les couleurs sont mises, apparement, il est plus gros sous FF et les volets ne s'affichent pas. Aucune erreur est trouvée par la console JS.. :s)

Commentaire de chimelpremier le 08/06/2005 10:08:09

Bonjour PerfectSlayer
Quelle plateforme ? sur win98 : RAS

Commentaire de PerfectSlayer le 08/06/2005 11:17:41

Win XP Pro... Tu veux le code ?

P.S. : merci de m'aider... :-$

Commentaire de chimelpremier le 08/06/2005 12:50:19

La construction du menu liste doit se faire ainsi:

  <li>Home :
    <ul>
      <li><a href="index.html">Accueil</a></li>
      <li><a href="autre_lien.html">autre_lien</a></li>
    </ul>
  </li>

l' <ul> sous-menu à l'intérieur du <li> titre
Bien vu PerfectSlayer ?


Commentaire de PerfectSlayer le 08/06/2005 13:32:34

Merci bien. Ca me paraissait pas moins logique du coup j'y ai plus repensé. J'te pris de m'excuser de t'avoir déranger pour si peu. Merci pour ton code. (faudrait que je pense à poster les miens... :s)

Commentaire de gavrochelegnou le 27/06/2005 17:09:55

Super script, mais juste un problème a force de descendre dans X niveau d'arborescence (ou juste quelques niveaux avec des textes longs sur la droite) , le menu va se positionner à l'exterieur de la fenêtre au lieu de revenir sur la gauche.

Commentaire de tamazight le 27/07/2005 11:52:04

Salut,
Ton menu est super. Mais moi je voudrai en plus que le nombre d'éléments du menu et des sous-menus puissent varier. Quelqu'un a une petite fonction qui va dans ce sens?

Commentaire de johann1 le 12/08/2005 14:42:18

Chimelpremier,

Je tenais à te remercier pour ton superbe menu que nous avons d'ailleurs mis sur notre site (en construction)http://voicemessenger.biz
Nous avons encore néanmoins quelques difficultés et conflits avec les menus CSS! Celui du site et le tien! J'avoue que c'est encore un manque de connaissance, mais nous trouverons bien la solution.
Bref, nous tenions à te remercier

Bien à toi

Johann1

Commentaire de philoult le 26/08/2005 15:47:35

super ton code, par contre je suis mega debutant en js et j'ai un petit pb, je voudrait pouvoir placer le menu où je veux dans un endroit fixe dans ma page genre à 100px en-dessous du haut de la page, mais je ne vois pas comment faire.
Je pense que c'est dans le code js mais je ne trouve pas.
Peux tu m'aider?

Commentaire de philoult le 29/08/2005 11:01:46

probleme résolu, solution trouvée dans le fichier css.

Commentaire de Xini28 le 06/12/2005 00:28:20

Je trouve ce code vraiment très bien. J'aurais tout de même une question. Lorsque j'ai ajouté une image dans le menu, sans être dans un <ul> ou <li>, j'ajuste ensuite la largeur des cases. Avec Mozilla, il n'y a pas de problème, j'ajuste les cases parfaitement avec la dimension de l'image. Le problème est sur Internet Explorer. L'ajustement qui se trouve sur Mozilla, n'y est plus sur Internet Explorer. Le cadre s'ajuste à l'image, mais les cases sont plus petites. Qu'est ce que je pourrais faire pour arranger cela. J'ai essayé plusieurs fois, mais rien à y faire.

Voici le code que j'ai alors pour la page du menu css :

#ancre_menu{vertical-align:top;padding:5px 5px 0 0;margin:0}

/* liens */
.mh a,.vg a,.vd a{display:block;margin:0;padding:2px 5px;width:8.1em;
  text-decoration:none;line-height:1.1em;cursor:default}
.titre a{background-color:#dac6ff;color:#800080/*violet*/}
.titre a:hover,.titre a:active,.titre a:focus{background-color:#800080;color:#ffe263}
.titre .suivi{background-color:#EFE6FE}     /* couleur du suivi */
/* avec url */
.lien a{background-color:#ffe263;color:green;font-weight:bold;cursor:hand/*IE5.0*/}
.lien a:visited{color:gray;font-weight:normal}
.lien a:hover,.lien a:active,.lien a:focus{
  background-color:green;color:#ffe263;border:2px inset;padding:0 3px;}

/* flèches */
.fh,.fl{font-size:80%}
.fl{position:absolute;}

/* 1er niveau : */
.mh li,.vd li,.vg li{display:inline;} /* bug IE */
.mh li{float:left;}
.mh{height:1.35em}
.vg,.vg ul,.mh,.mh ul,.vd,.vd ul{position:absolute;margin:0;padding:0;
  border:2px outset #DDF4EC;z-index:9}
.vd{text-align:right;right:1.3em}/* marge du body de general.css reportée */
.vg{text-align:center;left:6.6em}

/* 2éme niveau et suivants */
.mh li li{float:none;}
.vg ul,.mh ul,.vd ul{visibility:hidden;}
.mh ul{margin-top:1.4em}
.vg ul,.mh ul ul{margin:-1.5em 0 0 -3px;}
.vd ul{margin:-1.5em -3px 0 0;}


Voici une partie du code sur la page html en ayant repris sans rien changer:

  <li>Choix
    <ul>
      <li>Choix 1</li>
      <li>Choix 2</li>
    </ul>
  </li>
  <img src="menu.jpg">
  <li>Test
  </li>

Je vous remercie par avance.

Commentaire de Xini28 le 06/12/2005 00:30:16

Petite précision :

Il s'agit du menu à gauche. Voilà.

Commentaire de chimelpremier le 07/12/2005 12:40:53

Bonjour,
Faire les corrections pour IE et les mettre dans un commentaire conditionnel : http://forum.alsacreations.com/faq/#item53  

Commentaire de Xini28 le 07/12/2005 18:01:19

Merci pour l'info. Je ferais le test et te tiendrais au courant.

Commentaire de gnatty le 16/12/2005 13:57:28

Bonjour chimelpremier

Ton script est excellent merci beaucoup car je ne suis expert en code et cela me sert enormement.

La différence en couleurs entre certaines couleurs n'est pas suffisante. Le seuil est 500, et les couleurs de premier plan et de fond est inférieur à ce chiffre. La différence de couleur n'est pas conforme au W3C , il se conforme à la gamme employée par Hewlett Packard. Hewlett Packard recommande une limite de différence de couleur de 400. Ce qui rend ton script pas tout a fait au norme du W3C. Voici un lien qui te permettre de vérifier tout ca, bien entendu ce n'est que du détail et merci encore.

http://juicystudio.com/services/colourcontrast.php

Commentaire de Xini28 le 22/12/2005 09:17:33

Penses tu que l'on peut mettre une image à la place des écritures dans le menu? Je me pose la question. Ca serait intéressant. Je cherche, mais je n'ai pas encore trouver.

Commentaire de johann1 le 22/12/2005 10:21:23

Salut Xini,

Bien-sûr que l'on peut mettre des images dans ce menu (génial).
Je suis très loin d'être expert dans ce domaine, c'est te dire si c'est facile! (j'ai mis 2 jours à comprendre lol
Va voir www.voicemessenger.biz
C'est mon site avec le menu, tu verras les images!
Ne fais pas attention, c'est depuis la nuit des temps qu'il est en construction
Si ca ne te suffit pas, je te donnerai tout le fichier "complet"!
Bonne chance

Commentaire de Xini28 le 24/12/2005 18:01:45

Merci, mais je ne vois pas de menu dynamique s'afficher.

Commentaire de Xini28 le 24/12/2005 18:36:46

Je n'arrive pas avec les structures conditionnelles. Lorsque je suis avec Internet Explorer, il m'affiche le bon une fois. Par contre, quand je suis avec Mozilla, il ne m'affiche rien du tout. Voici le code :

<!--[if IE]>
<img src="a1.jpg">
<![endif]-->
<!--[if !IE]>
<img src="a.jpg">
<![endif]-->

Comment je peux faire pour indiquer que je veux qu'il affiche une autre image quand ce n'est pas Internet Explorer? Merci d'avance pour vos réponses.

Commentaire de Xini28 le 02/01/2006 10:21:12

Salut,

J'ai cherché dans le code pour déplacer le menu sur la gauche. J'ai ajouté le code :
.vg{text-align:center;left:8em}

J'ai placé le code en dessous de la ligne 25 qui est :
.vd{text-align:right;right:1.3em}/* marge du body de general.css reportée */

Cependant quand j'ai ajouté ce code, le menu était bien décalé sur la gauche, mais si je met la page plus petit, le menu ne s'affiche pas où je le désire et se décale. Je ne vois pas comment faire. Merci par avance de vos réponses.

Commentaire de Xini28 le 02/01/2006 11:39:05

J'ai réussi à régler mon problème. Je vous remercie quand même.

Commentaire de Ronio le 30/03/2006 14:01:58

Bonjour a tous,
Bravo pour ce menu de qualité!

Je rencontre un probleme.

Je vois la liste des <ul> et des <li> le temps d'une demi seconde avant qu'il ne charge le fichier css et le fichier javascript ( bizarre )
Puis ensuite, le menu est decalé d'un cran, je suis obligé de faire un
position absolute top:-20 pour le mettre au bon emplacement.

Avez vous une solution?

Je vous remercie d'avance.

Ronio

Commentaire de hb_bm le 13/05/2006 12:59:20

Hello tutti,

J'ai un problème avec la fct <body onload="initMenu('menu','vg')">

Dans ma page je veux integrer un mignon petit script pour ouvtir les images dans une sorte de pop-up stylée: [I]lightbox.js[/I].

Mais, y'a conflit entre ce script qui finit comme indiqué plus bas, avec window.onload! c'est visible ici-[URL="http://charcoalrider.ifrance.com/pages/hist_resume.html"]dessus[/URL]


et pourtant, dans ce [I]lightbox.js[/I], y'a

[CODE]//
// addLoadEvent()
// Adds event to window.onload without overwriting currently assigned onload functions.
// Function found at Simon Willison's weblog - http://simon.incutio.com/
//
function addLoadEvent(func)
{
var oldonload = window.onload;
if (typeof window.onload != 'function'){
     window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}

}



addLoadEvent(initLightbox); // run initLightbox onLoad
[/CODE]



Donc, je me dis qu'inclure ce <body onload dans mon [I]menu.js[/I] en

window.onload = initMenu('menu','vg')

Mais ça marche pô....

z'auriez une idée ?
Merci d'avance

Commentaire de apoignant le 17/08/2006 11:07:11

Bonjour

je suis confrontée au sousis des lisets pour un sit comportant plusieurs pages .... je souhaiterai utiliser a description avec balises <ul><li> dans un ficheir séparé de facon a ce que toutes mes pages soient a jour concernant le menu ...
Il m'a été imposé un menu en haut de page et avec des frames ca rend pas génial .....

Quelqu'un a une idée ?

merci

Commentaire de docquino le 14/09/2006 00:28:20

Bonsoir chimelpremier,
j'ai pris le temps de lire les autres commentaires avant de t'écrire!
Tout d'abord je te remercie pour ce code.
Je t'explique mon soucis, j'ai opté pour faire un menu horizontal il ya 5 rubriques lorsqu'il s'affiche il est positionné à gauche je n'arrive pas à le positionner comme je veux. J'ai essayé de faire ça :
.vg{text-align:center;left:10px}
mais ça ne change rien, le menu est tjrs à gauche.
Je fais mon site sous win xp avec dream MX et ie !
as-tu une idée ou une solution.
Merci de ton aide

Commentaire de docquino le 14/09/2006 00:31:41

re..
je suis désolé je me suis mal expliqué, le menu se positionne à droite et je voudrais le positionné à gauche.
j'ai essayé de mettre cette ligne de code :
.vg{text-align:center;left:10px}
le menu ne se déplace pas !
merci

Commentaire de docquino le 17/09/2006 17:48:25

please
est ce que quelqu'un peur m'aider c'est vraiment urgent !
merci d'avance...

Commentaire de chimelpremier le 17/09/2006 22:49:21

Bonjour,
Mes messages ne passent pas, je vais essayer de nouveau :
http://moncastel.9online.fr/menu_deroulant/vg.htm
Ce menu est difficilement modifiable et peu accessible essai de faire plus simple

Commentaire de docquino le 17/09/2006 22:52:58

salut chimelpremier merci de ton aide..
ton url ne fonctionne pas ! je n'ai pas trés bien compris ce que tu m'as dis.
Je voudrais juste décalé le menu sur la gauche à une position voulue est-ce possible ?
Merci pour ta réponse

Commentaire de docquino le 17/09/2006 22:55:01

pour etre encore plus clair : j'ai opté pour le menu horizontal je voudrais le placer à une position voulue (milieu de page)
est-ce possible
encore merci

Commentaire de Josiejlc le 27/12/2006 17:13:42

Bonjour,
Je voulais juste savoir comment faire pour fixer la longeur des sous-menus.
J'arrive à ajuster la taille (width) du menu principal, mais pas des sous-menus qui, dans mon cas, diminuent de taille par rapport au menu principal.
Merci et bonnes fêtes
Josie

Commentaire de Joto le 31/12/2006 17:10:30

Bonjour,
Tout d'abord je tiens à féliciter ton travail Chimelpremier, c'est un menu très puissant et bien que ne connaissant pas tous les rudiments du CSS/Javascript, je dois dire que c'est l'un des codes le plus propre et le plus souple que j'ai jamais vu (il marche sur tous les navigateurs ou presque). Cependant j'ai plusieurs questions :

- j'essaye de centrer le menu sur ma page avec une balise div, le problème c'est que ça ne marche pas pour IE (7). Par contre je me suis rendu compte que en plaçant dans le style #ancre_menu, "position:relative" je pourrais peut-être centrer, sauf que en précisant en précisant "left" sous forme de % il centre à partir du coin gauche du bloc. La solution serait de mettre une valeur négative à "margin-left" mais pour cela il me faudrait connaitre la largeur du menu, mais celle-ci est calculée automatiquement, me trompe-je ? Sinon comment savoir sa taille ?

- Sous Firefox, le menu s'affiche très propre, nickel. Par contre, sous IE (encore lui), les cellules des sous-menus ont un espace d'un ou deux pixels. Ca n'est pas spécialement grave sauf que j'ai mis un délai de disparition des sous-menus assez court (250 ms), et si la souris se trouve exactement au dessus de ces espaces, le sous-menu disparait. Une idée pour éviter ça ? Sinon ça n'est pas trop grave.

- je possède un forum type phpbb (que tu pourras voir dans mon profil) et je compte donc y insérer ton menu. J'y ai ajouté une petite modification pour qu'il liste toutes les catégories du forum, du coup cela en fait un petit MOD mix Javascript/PHP. Je compte du coup le proposer en libre téléchargement sur le forum www.phpbb-fr.com. Acceptes-tu alors que je m'appuie sur ton menu pour proposer ce MOD ? Si tu veux me consulter pour les modalités, tu peux me contacter par mon forum (il y a des sections où tu n'as pas besoin de t'inscrire pour poster) dont l'adresse est dans mon profil (je ne met pas de lien ici je veux pas paraitre pour quelqu'un qui fait de la pub).

Merci de ta compréhension.

Commentaire de instadm le 27/03/2007 11:37:54

Bonjour, voila mon pb. Je veux que le menu soit sur un fichier séparer pour ne pas avoir de pb de mise a jour du menu sur toutes mes pages du site. Donc mon index.php fait appel avec include (entre body et body) a mon menu dont j'ai laissé que ce qu'il y a entre body et body. Par ailleur je fait appel dans mon fichier index.php (entre head et head) à mes 2 fhichiers css et js.
Mais quand je lance dans easyphp mon index.php, mon menu se trouve en html sans prendre en compte le css et le js.
aidez moi, je ne sait plus quoi faire, merci

Commentaire de instadm le 27/03/2007 14:26:55

RE bonjour, c'est bon j'ai trouver, j'avais oublier de mettre dans mon fichier index.php :  <body onload="initMenu( 'menu','mh' )">
merci quand même.

Commentaire de cbinjem le 04/05/2007 10:24:42

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.

Commentaire de DenisGilbert le 24/11/2007 19:09:00

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

Commentaire de DenisGilbert le 26/11/2007 00:29:48

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

Commentaire de matduchesne le 28/01/2009 23:02:02

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

 Ajouter un commentaire

Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 3,260 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)