MENU HORIZONTAL DYNAMIQUE AVEC SOUS-MENUS AVEC FONDU

Commentaire de xaide le 15/09/2004 01:56:43

Problème de compatibilité avec FireFox (Mozilla).
Je n'ai pas regardé ce qu'il y a à modifier, mais ça devrait être rapide, ça fonctionne, juste l'affichage est tout croche.

Juste un petit conseil pour ton site (http://horizonpc.phpnet.org/Code/Menu%20Horizontal.html), 2 choses à éviter y sont présentes, majuscules et espace, certes ça fonctionne, mais pour les majuscules il suffit que tu sois sur un serveur Unix/Linux pour que tes majuscules soient à mettre partout dans tes pages (sans se tromper, en mettant tout en minuscules, tu risques de moins t'arracher les cheveux) et pour l'espace,  d'un navigateur à l'autre ou même sur d'autres ordnateurs tu pourrais avoir des problèmes, donc mieux vaut éviter aussi... ;-)

Sinon pour finir sur une bonne note, super code malgré tout, l'idée des variables de configuration est bonne, continue.

Commentaire de rttb le 19/09/2004 18:45:31

Super !!!, tres beau script...
Allez, une remarque quand meme, pour redendre plus pratique, la largeur des sous menus pourrais etre calculee automatiquement en fonction du nombre de menus.

Commentaire de larion le 20/09/2004 12:35:49

Centré :
- Il suffit de faire un tableau de la largeur du menu.
- Centrer le tableau sur la page.
- Le code doit être sur la gauche, dans le tableau.
A ce sujet, je vais peut-être modifier le script.

Sur mozilla, le sous menu superpose le menu.
??? Bizar. Il est pourtant compatible avec FireFox.

"Y-a-t'il une possibilité de garder le (sous)/menu actif en highlight ?"
J'imagine, si on n'est sur la page "HomePage", la cellule "HomePage" doit être en surbrillance.
Je pense que c'est possible avec l'objet window.location.

Commentaire de larion le 28/09/2004 18:10:07

Bonjour Bumbololo,

C'est le code d'un menu dynamique...
Pour transformer le code en statique, il faut enlever les fonctions :
document.onmousemove
window.onscroll
Mais, il doit y avoir d'autre modification à faire.

Commentaire de larion le 28/09/2004 21:09:03

Je pense avoir trouver :
Supprimer : document.getElementById('topmenu').style.top = document.body.scrollTop+PosY
ou le modifier par
document.getElementById('topmenu').style.top = PosY

Puis modifier
skn.top  = document.body.scrollTop+PosY+HauteurM  
Par
skn.top  = HauteurM

Ca l'air de fonctionner chez moi.
Tiens moi au courant. @+

Commentaire de dumbololo le 28/09/2004 22:39:07

Une petite idée pour compléter ton menu :

Pourrais tu insérer une fonction qui permettrai de faire disparaitre au bout de quelques secondes le sous menu ?
Car lorsque l'on passe sur le menu, le sous menu apparait, mais disparait uniquement si l'on clic sur un lien ou dans le vide dans la fenêtre de la page web.

(Côté pratique : Faire disparaitre le sous menu, quand on est passé sur le menu sans le vouloir et éviter de cliquer dans le vide pour le faire disparaitre.)

@ +

Commentaire de dumbololo le 30/09/2004 13:09:08

N'est t'il pas possible de rajouter l'évènement OnMouseOut une deuxième fois dans la ligne correspondante ?

Commentaire de dumbololo le 30/09/2004 18:43:34

Ok, si tu trouves, peux tu me tenir au courant de ce que tu auras fait car moi, je nage totalement...
@+

Commentaire de larion le 06/10/2004 00:06:43

Voilà le code. Cela n'a pas été facile. Et je ne suis pas sur que j'ai tout prévue.
Pour l'instant le code détecte la sortie de la souris sur la vertical. Fonctionne :
- sous IE et FireFox
- Sous-Menu une ligne ou plusieurs.

http://horizonpc.phpnet.org/Code/Menu%20Horizontal3.html

Commentaire de larion le 07/10/2004 11:15:48

Bonjour Malcia,

Il est impératif que les titres soient de largeurs plus petites que la largeur des leurs cellules respectives, pour obtenir un bon fonctionnement de ce menu.

Tu n'as pas dit ce que tu cherchais ?
Tu désires peut-être avoir ce genre de menu : http://telepoche.guidetele.com

Commentaire de larion le 07/10/2004 12:12:28

Alors remplace dans le code, vers la fin :
document.write("<TD WIDTH="+(LargeurM*2)/menu.length+" ALIGN=center

par :
document.write("<TD ALIGN=center

Il faut supprimer :
WIDTH="+(LargeurM*2)/menu.length+"

Je fais mettre à jours le code en y rajoutant 2 paramètres :
EgualM   =   0       // Largeur des cellules Identiques:1 / Différentes:0
EgualS   =   0       // Largeur des cellules Identiques:1 / Différentes:0

En espérant avoir fait ton bonheur.

Commentaire de malcia le 07/10/2004 14:21:26

merci beaucoup d'avoir pris le temps de regarder mais apparament, la seule solution pour que ce soit nickel c'est de mettre des titres d'une seule ligne...

en tout cas encore merci et bravo !

Commentaire de larion le 08/10/2004 01:18:05

Bonjour Bumbololo,

Je ne m'en souviens plus trop bien.
Voir le source de http://horizonpc.phpnet.org/Code/Menu%20Horizontal3.html
Ce qui a été ajouté :
(1) HauteurY = HauteurS

(2) document.onmousemove = function(e)
{  document.getElementById('topmenu').style.top=document.body.scrollTop+PosY
   document.getElementById('topmenu').style.visibility='visible'  
   y = (navigator.appName.substring(0,3)=="Net") ? e.clientY : event.clientY;
   if(skn.visibility=='visible' && (y<(PosY+17) || (PosY+16+HauteurM+HauteurY)<y)) skn.visibility="hidden"
  }
// 16 et 17 correspondent à la marge haute

(3) HauteurY = (HauteurS+1)*msg.length/2

Je crois qu'il n'y a rien d'autre.
Pour un menu statique, il faut faire les mêmes modifications qu'avant.
Je n'ai pas mis à jour le code, je ne sais pas si c'est stable.

Commentaire de larion le 30/10/2004 00:09:48

Pour faire fonctionner correctement deux scripts, il faut vérifier que les variables soient différentes ce qui ne doient pas être le cas.
Il faut donc renommer toutes les variables du premier script.

Commentaire de obusco le 01/11/2004 19:23:24

Help me please
Merci de la reponse :s

Commentaire de bbpl le 13/12/2004 08:15:10

Bonjour,
Je suis en train de paramétrer ce script, même pour moi, qui est débutant, c'est trés simple à comprendre.
Bravo

Commentaire de tartuff25 le 26/12/2004 15:07:28

Personne peut me dire si ce script est utilisable avec des cadres ?
Tartuff

Commentaire de dandymanson le 30/12/2004 21:49:24

Salut, tout d'abord bravo pour le script,
il est simple et facile à changer. 9/10.
Mais je suis débutant, est-il possible de paramémetrer les liens vers une iframe.
Si kelk1 peut me répondre. new_jesus_is_punk@hotmail.com ou ici

Commentaire de jaco13 le 05/01/2005 18:43:35

Bravo larion pour ce code! Il est superbe!
Tu as dû en baver quand même pour faire tout çà!
Je viens d'installer le code "horizontal dynamique avec sous-menus". Je suis débutant et j'ai un petit problème pour centrer les textes dans les sous-menus. Dans les menus, ils le sont très bien mais pas moyen de le faire dans les sous-menus car ils se calent à gauche par défaut.
Les menus fonctionnent très bien en local sur mon p.c., j'espère qu'en ligne ce sera pareil car ce qui m'inquiète, c'est que je ne vois pas la souris se transformer en main lorsque je clique sur un lien! Et pourtant, le lien cliqué s'affiche!!!
Est-ce vrai que les menus en javascript ne sont pas pris en compte par Google et compagnie?
Merci à toi!
Jacques

Commentaire de jaco13 le 07/01/2005 00:59:19

Merci Larion
Je viens de le mettre sur mon script. Il fonctionne vraiment très bien.
Est-il possible de recadrer un peu l'alignement vertical des sous-menus par rapport au menus. Certains sous-menus sont un peu décalés à droite ou à gauche lorsqu'ils apparaissent et ne sont pas pile-poil alignés sous leur menu respectif. Comme c'est un site pour une société, j'ai peur qu'ils m'en fassent la remarque?
A part, c'est vraiment nickel-chrome!
bravo à toi, tu es un as!

Commentaire de jaco13 le 07/01/2005 13:53:16

La page avec ton menu n'est pas encore en ligne. Je suis en train de faire des modif dessus pour l'instant mais qu'en local sur mon p.c. car je ne sais pas exactement ce que le client va vouloir en finalité. Je te donne quand même le lien du site où ton menu va sans aucun doûte remplacer celui existant.
www.autos-occasions.org

Commentaire de jaco13 le 07/01/2005 16:54:13

Comme il est beau le dernier que tu as pondu où les sous-menus s'affichent en apparaissant avec une temporisation! Il est déjà opérationnel et paramétrable celui-là car il me plait encore plus que l'autre?

Commentaire de jaco13 le 07/01/2005 18:07:59

Oui en effet, je viens de remarquer çà aussi!Lorsque tu auras la bonne version, préviens-moi car c'est celui-là que j'aimerais bien mettre son le site!

Commentaire de larion le 07/01/2005 20:46:16

Mis à jour stable me semble-t-il, disponible ici :
http://horizonpc.phpnet.org/Code/Menu%20Horizontal.html
Modification :
- Fondu lors de la sortie des sous-menus
- Centrer le texte dans sous-menus: ok
- Alignement vertical des sous-menus : je suis de près l'anomalie sur http://www.guillaumie.com  :-)

Commentaire de jaco13 le 11/01/2005 15:48:00

Bonjour larion!

Je crois que j'ai un petit problème avec le dernier menu que tu as conçu et dont je parle dans mes messages précédents!
Dans le body, même si je mets
<script language="JavaScript" src="Menu.js" type="text/JavaScript"></script>  
dans un calque de ma page en le plaçant juste après la balise <body>, (donc tout en haut du body), sur le site, les sous- menus en se déroulant  passent en-dessous des autres calques inclus dans cette page du site! Dans ces calques, il y a des écrits, des photos et d'autres choses encore! C'est à dire qu'on ne voit plus ce qui est écrit dans les sous-menus car il y a d'autres choses qui les cachent car elles sont devant! Je n'ai pas encore essayé de mettre le code du menu dans un tableau! Je vois mon client demain matin! J'espère que ça va marcher avec le script du menu dans le tableau placé dans un calque et que le menu passera au-dessus de tout le monde pour être toujours visible!
Je te mets au courant!

Commentaire de bbpl le 11/01/2005 16:32:39

Excuse larion,
mais le lien http://horizonpc.phpnet.org/Code/Menu%20Horizontal.html
n'est pas oérationnel.

Merci encore

Commentaire de jaco13 le 11/01/2005 17:24:09

Je ne trouve pas le div du sous-menu du genre
<DIV class=popper id=topdeck></DIV>
Voici le bas de ton code où il y a bien <DIV style="position:relative;">
mais l'autre n'y est pas!
Il y a bien déjà un style="z-index:15;" mais ça ne fonctionne pas quand même!

}

document.write('<DIV style="position:relative;"><DIV id=MenuS style="position:absolute;z-index:15;"></DIV><TABLE ID=MenuM style="position:absolute;" BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR='+Color3M+' WIDTH='+LargeurM+' HEIGHT='+HauteurM+'><TR><TD><TABLE CELLPADING=0 CELLSPACING=1 BORDER=0 WIDTH=100% HEIGHT=100%><tr>')
skS=document.getElementById("MenuS").style
skM=document.getElementById("MenuM").style
pass=0
while(pass<menu.length/2)                                        
{ document.write("<TD "+(EgualM?" WIDTH="+2*LargeurM/menu.length:"")+" align="+AlignM+" BGCOLOR="+Color1M+" onMouseDown='location.href=\""+menu[pass*2+1]+"\"' onMouseOver='this.className=\"MenuSM\";this.style.background=\""+Color2M+"\";pop(zlien["+pass+"],"+pass*(2*LargeurM/menu.length)+")' onMouseOut='this.className=\"MenuM\";this.style.background=\""+Color1M+"\"' CLASS=MenuM>"+menu[pass*2]+"</TD>")
  pass++
}
document.write('</TR></TABLE></TD></TR></TABLE></DIV>')
skM.top=!Static*document.body.scrollTop+PosY
}

Commentaire de larion le 11/01/2005 17:34:59

Et sur le premier DIV :
Ici : document.write('<DIV style="position:relative;"> ...
Mettre document.write('<DIV style="position:relative;z-index:15;"> ...

Commentaire de jaco13 le 11/01/2005 20:14:49

Il n'est pas encore en ligne avec les modif.. En ligne, il y a encore mon menu perso.
J'ai fait les modifications moi-même dans mon script comme tu l'avais mentionné . Ca fonctionne en local donc je pense que ça ira en ligne aussi!
Je te remercie vraiment beaucoup pour ton dévouement!

Commentaire de jaco13 le 12/01/2005 13:43:45

Salut larion!
J'ai vu le client ce matin et il a regardé le menu. Il voulait en plus des "menus" et des "sous-menus", faire encore un "sous-menu" qui s'ouvrerait vers la droite à partir d'un "sous-menu". Donc "Menu" qui ouvre sur des "sous-menus" qui ouvreraient encore sur des "sous-menus". Je le comprends très bien car dans son Menu, il y mettait "Nos services", dans le sous-menu, il y mettait "commercial", "après-vente", "location". Dans le sous-menu commercial, il y avait encore une arborescence vers 3 ou 4 sous-menus commerciaux qui auraient bien eu leur place à cet endroit. Je ne savais pas comment faire ce 2ème sous-menu alors je l'ai persuadé de faire autrement. Il m'a fait la remarque qu'il était un peu déçu qu'il fallait cliquer dans le vide pour faire disparaître un sous-menu lorsqu'il était ouvert. Il aurait préféré que le sous-menu disparaisse lorsque la souris n'est plus dessus.
Salutations à toi!

Commentaire de jaco13 le 12/01/2005 16:55:54

Ah mais je n'avais pas vu qu'on pouvait acheter ton travail sur la version démo! Je vais le faire tout de suite!
Ca y est, c'est fait, je viens de payer les 2 euros pour ton travail!
Je dois virer mon ancien code et ajouter celui-là pour gérer la disparition des sous-menus lors la sortie de souris et je peux modifier çà dans mon ancien code?

Commentaire de larion le 12/01/2005 17:46:38

Si tu as le moindre problème, n'hésites pas.
Que penses-tu du générateur ?
Je viens juste de le réaliser, il peut y avoir quelques bugs.

Commentaire de larion le 12/01/2005 18:48:01

Il faut mettre :
HideAuto=1   // Pour avoir le fondu
Cadre     =''   // Pas de gestion des Frames
Tiens moi au courant.
On est bien d'accord que cette gestion fonctionne bien sur http://menuhorizontal.pass-x.com ?

Commentaire de jaco13 le 12/01/2005 19:34:37

Mais je n'ai pas tout çà moi dans ma version. J'avais été sur l'un de tes menus et j'avais fait un copier/coller en faisant "afficher la source". Je l'avais collé dans un fichier.js comme tu le préconisais.
Je n'ai pas de
HideAuto=1   // Pour avoir le fondu
Cadre     =''   // Pas de gestion des Frames

J'ai çà comme code:

Static   =   0       // Mobilité du menu -> 0:Dynamique 1:Statique
Fondu    =   1       // 1:Fondu, 0:aucun
//Cellule normale
Color0M  = '#FFFFFF' // Couleur du texte
Color1M  = '#6A7D75' // Couleur Arrière
FontM    = 'Verdana' // Police
SizeM    =  13       // Taille de la Police
WeightM  = 'bold'    // Epaisseur de la Police : 'normal','bold','bolder', nombre
//Cellule Surbrillance
Color4M  = '#555555' // Couleur du texte
Color2M  = '#6699CC' // Couleur Arrière
FontSM   = 'Verdana' // Police
SizeSM   =  14       // Taille de la Police
WeightSM = 'bold'    // Epaisseur de la Police : 'normal','bold','bolder', nombre
//Divers
Color3M  = '#6A7D75' // Couleur Bordure ????
PosY     = 0       // Distance entre le haut de l'écran et le menu
EgualM   =   1       // 1:cellules de même largeur   0:...(si EnLigne=1)
LargeurM = 759       // Largeur
HauteurM =  30       // Hauteur
AlignM   = 'center'  // Alignement du texte 'center','right','left'
CursorM  = 'default' // Curseur-> default,hand...

menu = new Array
i=0
menu[i++] = 'Nos services'  // <-- Titre
menu[i++] = ''        // <-- Adresse (ici aucune)
menu[i++] = 'Nos occasions'
menu[i++] = 'occasions.php'
menu[i++] = 'Locations'
menu[i++] = 'reservation.php'
menu[i++] = 'Accès'
menu[i++] = 'acces.php'
menu[i++] = 'Nos liens'
menu[i++] = 'liens.html'

//************ Sous-Menus ************//
//Cellule normale
Color0S  = '#FFFFFF' // Couleur du texte
Color1S  = '#555555' // Couleur Arrière
FontS    = 'Verdana' // Police
SizeS    =  10       // Taille de la Police
WeightS  = 'bold'    // Epaisseur de la Police : 'normal','bold','bolder', nombre
//Cellule Surbrillance
Color4S  = '#999999' // Couleur du texte
Color2S  = '#6699FF' // Couleur Arrière
FontSS    = 'Verdana'// Police
SizeSS    =  10      // Taille de la Police
WeightSS  = 'bolder' // Epaisseur de la Police : 'normal','bold','bolder', nombre
//Divers
Color3S  = '#FFFF00' // Couleur Bordure
EnLigne  =   0      // 1:pour ranger sur une seule ligne  0:en colonne
EgualS   =   1       // 1:cellules de même largeur   0:...
LargeurS = 153       // Largeur si EnLigne=1
HauteurS =  25       // Hauteur
AlignS   = 'center'  // Alignement du texte 'center','right','left'
CursorS  = 'default' // Curseur-> default,hand...

zlien    = new Array
zlien[0] = new Array
zlien[1] = new Array
zlien[2] = new Array
zlien[3] = new Array
i=0
zlien[0][i++] = 'Commercial'                      // <-- Titre
zlien[0][i++] = 'liens.html'   // <-- Adresse
zlien[0][i++] = 'Après-vente'                      // <-- Titre
zlien[0][i++] = 'liens.html'   // <-- Adresse
zlien[0][i++] = 'Service location'                      // <-- Titre
zlien[0][i++] = 'liens.html'   // <-- Adresse


//i=0   Pas de Sous-Menus pour le menu principal 'Mon Compte'
//zlien[1][i++] = '...'
//zlien[1][i++] = 'http://'
//zlien[1][i++] = '...'
//zlien[1][i++] = 'http://...'
i=0
zlien[2][i++] = 'Service location'
zlien[2][i++] = 'reservation.php'
zlien[2][i++] = 'Location véhicules tourismes'
zlien[2][i++] = 'occasions.php'
zlien[2][i++] = 'Location véhicules utilitaires'
zlien[2][i++] = 'liens.html'
i=0
zlien[3][i++] = 'Accès général'
zlien[3][i++] = 'acces.php'
zlien[3][i++] = 'Plan garage'
zlien[3][i++] = 'acces.php'

//************ Fin des paramètres, Début du programme ************//
if(document.getElementById) {

document.write('<style type="text/css">')
document.write('.MenuM  {font-family:'+FontM+';font-size:'+SizeM+';font-weight:'+WeightM+';color:'+Color0M+';text-decoration:none;cursor:'+CursorM+';}')
document.write('.MenuSM {font-family:'+FontSM+';font-size:'+SizeSM+';font-weight:'+WeightSM+';color:'+Color4M+';text-decoration:none;cursor:'+CursorM+';}')
document.write('.MenuS  {font-family:'+FontS+';font-size:'+SizeS+';font-weight:'+WeightS+';color:'+Color0S+';text-decoration:none;cursor:'+CursorS+';}')
document.write('.MenuSS {font-family:'+FontSS+';font-size:'+SizeSS+';font-weight:'+WeightSS+';color:'+Color4M+';text-decoration:none;cursor:'+CursorM+';}')
document.write('</style>')

//obj.style.filter="blendTrans(duration=0.5)"
//obj.style.filter="blendTrans(duration=crossFadeDuration)"
//window.status=obj.style.visibility

function Fade(obj,str,see)
{ if(document.all && Fondu)
  { obj.style.filter="blendTrans(duration=1)"    
    if(obj.style.visibility!=see && obj.filters.blendTrans.status!=1)  
    { obj.filters.blendTrans.Apply()
      obj.style.visibility=see
      obj.filters.blendTrans.Play()
    }
  } else document.getElementById(str).style.visibility=see
}

if(!Static)
{ document.onclick     = function() { if(skS.visibility=='visible') Fade(MenuS,'MenuS','hidden') }
  window.onscroll      = function() { skS.visibility='hidden'; skM.visibility='hidden' }
  document.onmousemove = function()
  { if(skM.top!=(document.body.scrollTop+PosY+"px"))
    { skM.top=document.body.scrollTop+PosY
      Fade(MenuM,'MenuM','visible');
    }
  }
}

msgOld=null
function pop(msg,pos)
{ if(msg!=msgOld || skS.visibility=='hidden') msgOld=msg; else return
  skS.visibility='hidden'
  skS.top= !Static*document.body.scrollTop+PosY+HauteurM
  if(!msg.length) return
  pass=0
  if(EnLigne)
  { contenu="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR="+Color3S+" WIDTH="+LargeurM+"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=1><TR>"
    while(pass<msg.length)
    { contenu+="<TD align="+AlignS+(EgualS?" WIDTH="+2*LargeurM/msg.length:"")+" BGCOLOR="+Color1S+" onMouseDown='location.href=\""+msg[pass+1]+"\"' onMouseOver=\"this.className='MenuSS';this.style.background='"+Color2S+"'\" onMouseOut=\"this.className='MenuS';this.style.background='"+Color1S+"'\" HEIGHT="+HauteurS+" CLASS=MenuS>"+msg[pass]+"</TD>"
      pass+=2
    }
    contenu+="</TR>"
  } else
  { skS.left=pos
    contenu="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR="+Color3S+" WIDTH="+LargeurS+"><TR><TD><TABLE WIDTH="+LargeurS+" BORDER=0 CELLPADDING=0 CELLSPACING=1>"
    while(pass<msg.length)
    { contenu+="<TR><TD align="+AlignS+" WIDTH="+LargeurS+" BGCOLOR="+Color1S+" onMouseDown='location.href=\""+msg[pass+1]+"\"' onMouseOver=\"this.className='MenuSS';this.style.background='"+Color2S+"'\" onMouseOut=\"this.className='MenuS';this.style.background='"+Color1S+"'\" HEIGHT="+HauteurS+" CLASS=MenuS>"+msg[pass]+"</TD></TR>"
      pass+=2
    }     
  }
  document.getElementById("MenuS").innerHTML=contenu+"</TABLE></TD></TR></TABLE>"  
  Fade(MenuS,'MenuS','visible');
}

document.write('<DIV style="position:relative;z-index:15;"><DIV id=MenuS style="position:absolute;z-index:15;"></DIV><TABLE ID=MenuM style="position:absolute;" BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR='+Color3M+' WIDTH='+LargeurM+' HEIGHT='+HauteurM+'><TR><TD><TABLE CELLPADING=0 CELLSPACING=1 BORDER=0 WIDTH=100% HEIGHT=100%><tr>')
skS=document.getElementById("MenuS").style
skM=document.getElementById("MenuM").style
pass=0
while(pass<menu.length/2)                                        
{ document.write("<TD "+(EgualM?" WIDTH="+2*LargeurM/menu.length:"")+" align="+AlignM+" BGCOLOR="+Color1M+" onMouseDown='location.href=\""+menu[pass*2+1]+"\"' onMouseOver='this.className=\"MenuSM\";this.style.background=\""+Color2M+"\";pop(zlien["+pass+"],"+pass*(2*LargeurM/menu.length)+")' onMouseOut='this.className=\"MenuM\";this.style.background=\""+Color1M+"\"' CLASS=MenuM>"+menu[pass*2]+"</TD>")
  pass++
}
document.write('</TR></TABLE></TD></TR></TABLE></DIV>')
skM.top=!Static*document.body.scrollTop+PosY
}

Commentaire de larion le 12/01/2005 20:09:30

Variables.js doit donc contenir si je n'ai pas oublié de variable :
HideAuto=1   // Pour avoir le fondu
Cadre     =''
Static   =   0       // Mobilité du menu -> 0:Dynamique 1:Statique
Fondu    =   1       // 1:Fondu, 0:aucun
//Cellule normale
Color0M  = '#FFFFFF' // Couleur du texte
Color1M  = '#6A7D75' // Couleur Arrière
FontM    = 'Verdana' // Police
SizeM    =  13       // Taille de la Police
WeightM  = 'bold'    // Epaisseur de la Police : 'normal','bold','bolder', nombre
//Cellule Surbrillance
Color4M  = '#555555' // Couleur du texte
Color2M  = '#6699CC' // Couleur Arrière
FontSM   = 'Verdana' // Police
SizeSM   =  14       // Taille de la Police
WeightSM = 'bold'    // Epaisseur de la Police : 'normal','bold','bolder', nombre
//Divers
Color3M  = '#6A7D75' // Couleur Bordure ????
PosY     = 0       // Distance entre le haut de l'écran et le menu
EgualM   =   1       // 1:cellules de même largeur   0:...(si EnLigne=1)
LargeurM = 759       // Largeur
HauteurM =  30       // Hauteur
AlignM   = 'center'  // Alignement du texte 'center','right','left'
CursorM  = 'default' // Curseur-> default,hand...

menu = new Array
i=0
menu[i++] = 'Nos services'  // <-- Titre
menu[i++] = ''        // <-- Adresse (ici aucune)
menu[i++] = 'Nos occasions'
menu[i++] = 'occasions.php'
menu[i++] = 'Locations'
menu[i++] = 'reservation.php'
menu[i++] = 'Accès'
menu[i++] = 'acces.php'
menu[i++] = 'Nos liens'
menu[i++] = 'liens.html'

//************ Sous-Menus ************//
//Cellule normale
Color0S  = '#FFFFFF' // Couleur du texte
Color1S  = '#555555' // Couleur Arrière
FontS    = 'Verdana' // Police
SizeS    =  10       // Taille de la Police
WeightS  = 'bold'    // Epaisseur de la Police : 'normal','bold','bolder', nombre
//Cellule Surbrillance
Color4S  = '#999999' // Couleur du texte
Color2S  = '#6699FF' // Couleur Arrière
FontSS    = 'Verdana'// Police
SizeSS    =  10      // Taille de la Police
WeightSS  = 'bolder' // Epaisseur de la Police : 'normal','bold','bolder', nombre
//Divers
Color3S  = '#FFFF00' // Couleur Bordure
EnLigne  =   0      // 1:pour ranger sur une seule ligne  0:en colonne
EgualS   =   1       // 1:cellules de même largeur   0:...
LargeurS = 153       // Largeur si EnLigne=1
HauteurS =  25       // Hauteur
AlignS   = 'center'  // Alignement du texte 'center','right','left'
CursorS  = 'default' // Curseur-> default,hand...

zlien    = new Array
zlien[0] = new Array
zlien[1] = new Array
zlien[2] = new Array
zlien[3] = new Array
i=0
zlien[0][i++] = 'Commercial'                      // <-- Titre
zlien[0][i++] = 'liens.html'   // <-- Adresse
zlien[0][i++] = 'Après-vente'                      // <-- Titre
zlien[0][i++] = 'liens.html'   // <-- Adresse
zlien[0][i++] = 'Service location'                      // <-- Titre
zlien[0][i++] = 'liens.html'   // <-- Adresse


//i=0   Pas de Sous-Menus pour le menu principal 'Mon Compte'
//zlien[1][i++] = '...'
//zlien[1][i++] = 'http://'
//zlien[1][i++] = '...'
//zlien[1][i++] = 'http://...'
i=0
zlien[2][i++] = 'Service location'
zlien[2][i++] = 'reservation.php'
zlien[2][i++] = 'Location véhicules tourismes'
zlien[2][i++] = 'occasions.php'
zlien[2][i++] = 'Location véhicules utilitaires'
zlien[2][i++] = 'liens.html'
i=0
zlien[3][i++] = 'Accès général'
zlien[3][i++] = 'acces.php'
zlien[3][i++] = 'Plan garage'
zlien[3][i++] = 'acces.php'

-> Dans la page Html il faut remplacer
<script language="JavaScript" src="fichier.js" type="text/JavaScript"></script>
par
<script language="JavaScript" src="Variables.js" type="text/JavaScript"></script>
<script language="JavaScript" src="MenuHDJ.js" type="text/JavaScript"></script>

Commentaire de jaco13 le 12/01/2005 21:21:16

C'est bon, j'y suis arrivé!
Je te donnerai plus de détails demain dans un message!
Je suis fatigué là!
Salut et merci encore!

Commentaire de rocknroll2 le 14/01/2005 13:58:43

Slt larion,
Tout d'abord bravo pour ce menu !!!!!

Je viens de télécharger ta version Pro.
Bug en sortie de souris (objet manquant) sous certaines config d'options que je n'ai plus en tete mais je reposterai...

Mon blème n'est pas trop là:

J'ai 2 frames principales:
1- top
2-principal

la frame "top" est constituée elle même de 2 frames
1-top1
2-top2

dans top1, un message défilant
dans top2, ton menu

j'aimerais que les liens affichent les pages dans la frame "principal"

As-tu une solution? car dans la version "pro", il y a bien une option "gestion des frames", mais pour l'instant mes connaissances ne me permettent pas d'y mettre la bonne "formule magique".

A bientôt

rocknroll2

Commentaire de jaco13 le 15/01/2005 14:50:55

Bonjour larion

J'avance dans la construction du site et je me sers donc du générateur uniquement pour faire des essais sur les polices et les couleurs. Etant donné qu'il est impossible de rappatrier les données des variables de "Variables.js" vers le générateur, j'ai préféré pour l'instant, remettre tous les commentaires à côté des variables dans "Variables.js" et de travailler un peu à l'aveuglette comme dans la version sans le générateur.
J'ai un calque qui doit être plus long que les autres, ce qui m'occasionne un ascenceur à droite. Lorsque je descend dans la page avec l'ascenceur, j'ai le menu qui me suit! j'aimerais déactivé cela pour qu'il reste fixé tout en haut. As-tu une idée?
Cordialement.

Commentaire de jaco13 le 15/01/2005 17:23:23

Oui, j'ai vu çà! Mais en enlevant le dynamique et en le mettant en statique, ça ne gère plus la sortie souris automatiquement pour les sous-menus et il faut à nouveau cliquer dans le vide pour faire disparaitre les sous-menus!

Commentaire de larion le 19/01/2005 17:21:10

Oui. Au lieu de mettre du texte, on peut mettre une image.
Mais je ne sais pas si cela donne l'effet escompté...
Teste avec le code présenté sur cette page.

Commentaire de larion le 19/01/2005 17:46:47

Je parlais du code tout en haut de cette page.
(Parce qu'il y a un deuxième code présent sur http://menuhorizontal.pass-x.com)

Commentaire de elodieb le 20/01/2005 08:46:05

je m'excuse d'avoir répondu si tardivement, je n'avais plus acces à internet
je suis allée sur cette page puis affichage->source
mais une image n'a été appelée nulle nulle part

Commentaire de elodieb le 20/01/2005 11:57:47

en fait ce que je veux dire c'est ça:
aulien d'ecrire commercial créer un bouton commercial.gif et le mettre à la place
exemple au lieu de
zlien[0][i++] = 'Commercial'   plutot  zlien[0][i++] = 'commercila.gil'  mais les sous menus restent inchagés

Commentaire de elodieb le 20/01/2005 15:40:35

merci larion, les boutons s'affichent mais les sous menus sont décalés
exple: quand le curseur passe sur le bouton2,le sous-menu2 s'affiche sous le bouton1 ainsi de suite.
De les boutons sont encadrés par des rectangles comme quand on met le titre et non pas le commercial.gif
merci pour tout larion

Commentaire de olerien le 22/02/2005 12:50:45

Salut,
Tout d'abord " CONGRATULATION", je suis débutant et ton menu est super facile d'utilisation.
Ensuite j'ai un soucis pour mettre le menu en static.
Je rajoute la ligne " static = 1 " mais rien ne se passe.
Je supose qu'il y a d'autres fonction à modif...?
Qd j'entreprends ces modifs, ca ne fonctionne plus du tout! Même comparé à tes MàJ.
Y une astuce?

Cordialement,
Aurélien

Commentaire de elodieb le 28/02/2005 10:39:31

bonjour bbpl, je me permets de revenir sur ce code source en espérant ne pas abuser vu tout le temps qui s'est écoulé

le code que tu m'a passé m'a beaucoup servi sau que je voudrais savoir comment mettre de l'espace entre les différents boutons du menu?
est ce que ça serait egalement possible de mettre un autre bouton quand le curseur passe dessus
larion toi qui est l'auteur de ce script si tu vois ce que je veux dire , je veux bien de l'aide
merci pour tout
voir le menu de ce site www.lamaisondevalerie.fr

Commentaire de elodieb le 28/02/2005 15:41:55

merci de m'avoir repondu larion
mais en fait ce que je veux c'est que mes menus et non pas les sous menus soient des boutons, au depart ils sont vert et quand la souris passe dessus c'est le meme bouton mais de couleur rouge qui s'affiche, je pense qu'il faut ulisier onmousout mais je ne m'y connais pas
merci

Commentaire de elodieb le 28/02/2005 17:16:31

merci larion pour toute l'aide
malheureusement il est l'heure de partir mais je reviendrai la dessus demain, ça me tient beaucoup à coeur

Commentaire de elodieb le 01/03/2005 08:39:34

sur http://menuhorizontal.pass-x.com/Exemple.html je pense que les menus sont plutot du texte et non pas des boutons tu peux aussi regarder sur www.lamaisondevalerie.fr sans tenir compte du texte qui bouge mais seulement du changement de couleur
merci

Commentaire de elodieb le 01/03/2005 14:07:27

merci, mais maintenant comment faire pour avoir ce code?

Commentaire de jaco13 le 11/03/2005 18:17:41

Bonjour larion
C'est jaco13
J'avais déjà acheté ton menu horizontal au mois de janvier. J'étais arrivé à m'en sortir et il fonctionnait très bien. Là, j'ai voulu en faire un autre et je n'y arrivais plus car il y a des manip à faire. Alors j'ai décidé de l'acheter à nouveau pour avoir le mode d'emploi. C'est ce que j'ai fait! Malheureusement, je n'arrive pas à suivre tes instructions entre le menu "liens.txt", le générateur, les exemples et les autres fichiers. Vraiment, je suis embrouillé. Tu devrais faire un petit fichier rien qu'avec le mode d'emploi car là, c'est râpé pour ce coup-ci. Si tu as un petit mode d'emploi, tu peux me l'envoyer sur mon mail perso. à l'adresse jaco132@club-internet.fr
Salut à toi!

Commentaire de enrime le 11/03/2005 19:04:17

Je ne desespère pas d'avoir une réponse à ma question
du 24/11/2004:
que faire pour que ce script soit compatible avec une navigation sur mac os (décalage ,espace noir vide, lien incomplet) cf :

http://art.mygalerie.com

cordialement

Commentaire de jaco13 le 11/03/2005 19:59:56

je ne sais pas comment on fait pour te contacter en privé! l'autre fois, c'est toi qui m'avais contacté et j'avais simplement répondu. C'est pour çà que je t'ai donné mon mail perso.

Commentaire de rippoz le 23/03/2005 21:30:02

bonjour , je suis sur la version gratuite et je galere pour les frame

j ai ma premiere page qui est index.php

qui contient ceci comme frame

<frameset rows="258,*" cols="*" framespacing="0" frameborder="NO" border="0">
  <frame src="haut.php" name="topFrame" scrolling="NO" noresize >
  <frame src="centre.php" name="mainFrame">
</frameset>

mon menu s affiche donc en haut et je veux ouvrir les pages ds le mainframe , comment puisje faire ??  merci

Commentaire de larion le 06/04/2005 17:29:31

Bonjour,
Pour obtenir le fondu avec le code présenté ici, il faut mettre FonduS=1 (seulement pour IE).
Pour obtenir le code amélioré de cette page http://menuhorizontal.pass-x.com,
il faut se rendre dans le menu Télécharger : http://menuhorizontal.pass-x.com/Telecharger.html

Commentaire de larion le 06/04/2005 17:52:32

Comme je viens de le dire, le fondu de ce code ne fonctionne que sur IE (Windows).
Sur MAC, je pense que le navigateur est Safari, le fondu de ce code ne peut fonctionné avec ce dernier.

Commentaire de aerandil le 14/04/2005 19:17:19

Oups j'ai appuyer sur le bouton trop tot :p

J'ai quand même un soucis sous IE avec:

Erreur d'exécution Microsoft JScript: Cet objet ne gère pas cette propriété ou cette méthode

il parle de :

menu = new Array

Pourquoi me genere-t-il cette erreur?

Commentaire de kin95 le 15/04/2005 16:37:04

bonjour,
ton menu est super. Mon problème c'est :
j'ai une fenetre avec deux cadres. je met ton menu dans le premier cadre et je voudrai mettre les liens ds le deuxieme cadre en gardant le menu ds le premier. Que dois-je faire?

Commentaire de pacovar le 18/04/2005 15:03:11

Magnifique menu, simple à configurer, même pour le novice que je suis, j'ai tout de même un problème que je n'arrive pas à résoudre, c'est surement très simple à faire, mais je n'arrive pas à faire ouvrir une page en _blank, j'ai essayé plusieurs truc , mais sans résultat, si quelqu'un avait la solution, je suis preneur, et encore merci pour ce super menu larion.

Commentaire de baurely le 25/05/2005 11:38:56

COMMENT GERER DEUX FRAMES POUR CE MENU

(un frame en haut pour le menu et le reste du bas de la page pour les pages à afficher)

merci!!!!!!!!!!!!

Commentaire de baurely le 25/05/2005 11:44:12

comment gerer deux frames (un en haut pour le menu et l'autre pour les pages à afficher?
merci!!

Commentaire de larion le 06/06/2005 14:46:31

Bonjour,

- La version payant (1€80) permet d'avoir ce fonctionnement
Mais le code de ce menu n'est pas lisible car crypté.

- Malheureusement, je ne vends pas la source.
Sinon il n'y aurait plus intérêt à le vendre.
C'est comme si MicroSoft mettait à disposition les sources de Windows XP.
Personne ne l'achèterai finalement.

Cordialement
Larion

Commentaire de silverfab34 le 21/07/2005 15:25:36

Super le menu !
Cependant LArion, j'aimerais savoir si ca ne serait pas plus simple (pour la navigation), au lieu de faire [i++]= 'http://......' de faire un
a href="ma page.php"  ! Mais je reflechis comment l'integrer

Commentaire de zouhair77 le 09/11/2005 15:32:35

je tiens à te remercier pour ce code si simple à utiliser surtout pour les debutants en ja javascript comme moi!!

mais j ai un petit souci en inserant ton menu dans mon site(asp.net):

il n 'est plus visible une fois kil se croise avec un composant(datagrid,textbox...)!!

Commentaire de cobix25 le 26/12/2005 22:20:52

Bonjour !

Je vient d'installer un de vos code javascript sur mon site pour un menu déroulant, mais j'ai deux problèmes :

1) Le menu déroulant descent en même temps que ma page.
2) J'ai installé deux fois ce script car je veux deux menu. Mais il faut donc qu je change les variables dans le deusième code et je ne connais pas le javascript.

Voici mon code :

<SCRIPT LANGUAGE="JavaScript">
//************ Menu Principal ************//
Color0M = '#FFFFFF' //Couleur du texte
Color1M = '#5F9AC3' //Couleur Arrière
Color2M = '#87BDE3' //Couleur Arrière Surbrillance
Color3M = '#FF00FF' //Couleur Bordure ????
PosY = 0 //Distance entre le haut de l'écran et le menu
LargeurM = 200 //Largeur
HauteurM = 30 //Hauteur
AlignM = 'center' //'center','right','left'
FontM = 'Verdana' //Police
SizeM = 13 //Taille de la Police
WeightM = 'bold' //Epaisseur de la Police
CursorM = 'default' //Curseur-> default,hand...
menu = new Array
i=0
//--------[Texte/Html]------------------[ Adresse ]--------------------------//
menu[i++]='Télécharger' ;menu[i++]='http://www.javascriptfr.com'
menu[i++]='Le site' ;menu[i++]='http://www.cppfrance.com'
//************ Sous-Menus ************//
Color0S = '#FFFFFF' //Couleur du texte
Color1S = '#5F9AC3' //Couleur Arrière
Color2S = '#87BDE3' //Couleur Arrière Surbrillance
Color3S = '#5F9AC3' //Couleur Bordure
EnLigne = 0 //1:pour ranger sur une seule ligne 0:en colonne
LargeurS = 200 //Largeur
HauteurS = 20 //Hauteur
AlignS = 'center' //'center','right','left'
FontS = 'Verdana' //Police
SizeS = 12 //Taille de la Police
WeightS = 'bold' //Epaisseur de la Police
FonduS = 1 //1:Fondu, 0:aucun
CursorS = 'default' //Curseur-> default,hand...
k=-1; zlien=new Array
i=0; zlien[++k]=new Array
//------------[Texte/Html]------------------[ Adresse ]-------------------------------//
zlien[k][i++]='Styles Photoshop' ;zlien[k][i++]='http://www.javascriptfr.com/listecodes.aspx'
zlien[k][i++]='Scripts Photoshop' ;zlien[k][i++]='http://www.javascriptfr.com/forum.v2.aspx'
zlien[k][i++]='Wallpapers' ;zlien[k][i++]='http://www.javascriptfr.com/emploi.aspx'
i=0; zlien[++k]=new Array
zlien[k][i++]='Accueil' ;zlien[k][i++]='http://www.cppfrance.com/listecodes.aspx'
zlien[k][i++]='Contact' ;zlien[k][i++]='http://www.cppfrance.com/forum.v2.aspx'
zlien[k][i++]='Nos partenaires' ;zlien[k][i++]='http://www.cppfrance.com/emploi.aspx'
//************ Fin des paramètres, Début du programme ************//
document.write('<style>')
document.write('.ejmenu {background:'+Color1M+';text-align:'+AlignM+';font:'+WeightM+' '+SizeM+' '+FontM+';color:'+Color0M+';cursor:'+CursorM+'}')
document.write('.ejsmenu {background:'+Color1S+';text-align:'+AlignS+';font:'+WeightS+' '+SizeS+' '+FontS+';color:'+Color0S+';cursor:'+CursorS+'}')
document.write('</style>')
function fadeIn(obj)
{ obj.style.filter="blendTrans(duration=1)"
  if(obj.filters.blendTrans.status!=1)
  { obj.filters.blendTrans.Apply()
    obj.style.visibility="visible"
    obj.filters.blendTrans.Play()
  }
}
document.onclick = function() { skn.visibility='hidden' }
document.onmousemove = function() { dgt.top=document.body.scrollTop+PosY; dgt.visibility='visible' }
window.onscroll = function() { dgt.visibility=skn.visibility='hidden' }
function pop(msg,pos)
{ skn.visibility="hidden"
  skn.top=document.body.scrollTop+PosY+HauteurM
  if(!msg.length) return
  if(EnLigne)
  { content="<TABLE style='border-collapse:collapse;'WIDTH="+LargeurM*menu.length/2+" bordercolor="+Color3S+" BORDER=1><TR>"
    for(pass=0;pass<msg.length;pass+=2) content+="<TD onMouseDown='location.href=\""+msg[pass+1]+"\"' onMouseOver=\"this.style.background='"+Color2S+"'\" onMouseOut=\"this.style.background='"+Color1S+"'\" HEIGHT="+HauteurS+" CLASS=ejsmenu>"+msg[pass]+"</TD>"
  } else
  { skn.left=pos-1
    content="<TABLE style='border-collapse:collapse;'WIDTH="+LargeurS+" bordercolor="+Color3S+" BORDER=1>"
    for(pass=0;pass<msg.length;pass+=2) content+="<TR><TD WIDTH="+LargeurS+" onMouseDown='location.href=\""+msg[pass+1]+"\"' onMouseOver=\"this.style.background='"+Color2S+"'\" onMouseOut=\"this.style.background='"+Color1S+"'\" HEIGHT="+HauteurS+" CLASS=ejsmenu>"+msg[pass]+"</TD></TR>"
  }
  document.getElementById("topdeck").innerHTML=content+"</TR></TABLE>"
  if(document.all && FonduS) fadeIn(topdeck); else skn.visibility="visible";
}
document.write('<DIV style="position:relative"><DIV style="POSITION:absolute;VISIBILITY:hidden;z-index:15" id=topdeck></DIV><TABLE ID=topmenu style="position:absolute;border-collapse:collapse;" WIDTH='+LargeurM*menu.length/2 +' HEIGHT='+HauteurM+'><tr>')
skn=document.getElementById('topdeck').style
dgt=document.getElementById('topmenu').style
for(pass=0;pass<menu.length/2;pass++) document.write("<TD WIDTH="+LargeurM+" onMouseDown='location.href=\""+menu[pass*2+1]+"\"' onMouseOver='this.style.background=\""+Color2M+"\";pop(zlien["+pass+"],this.offsetLeft)' onMouseOut='this.style.background=\""+Color1M+"\"' CLASS=ejmenu>"+menu[pass*2]+"</TD>")
document.write('</TR></TABLE></DIV>')
dgt.top=document.body.scrollTop+PosY</SCRIPT>

Merci !

Commentaire de tishen16 le 23/02/2006 00:31:50

c'est bon merci j'a irésolu mon probleme ;)

Commentaire de zaky08 le 24/05/2006 18:59:49

Bonjour Larion,
Ton menu est exactement ce que je cherche depuis longtemps FÉLICITATION ! Mon seul hic... j'aimerais que le sous menu horizontal reste visible lorsque l'on clic sur un des liens (des sous menu) et que le lien sur lequel on a cliqué soit d'une couleur différente des autres. Juste pour une question d'ergonomie... Merci pour ta réponse !

P.S. Je suis nul en prog....

Commentaire de AzertyH le 06/01/2007 17:22:55

En fait, je voudrais savoir si la version de démo est compatible avec firefox? J'ai vu que l'auteur l'a rendu compatible avec firefox 1 jour après son premier post. A-t-il mis a jour le script en démo par rapport à la compatibilité avec firefox??

Commentaire de drsnugle le 14/05/2007 19:12:32

Bonjour, je ne comprends pas , j'integre directement ce code dans une page html de test entre les balises <script>.
Sous mozilla firefox ca passe mais sous ie ça ne me donne pas de sous menu(juste des trais jaunes).
Quelqu'un a t il une solution à ce dysfonctionnement ?
Merci d'avance

snugle

Commentaire de enanda le 21/06/2007 15:17:45

salut
comment je pourrais exploiter ce menu est ce que je suis obliger de l'acheter pour avoir le code sources et comment je pourrais avoir la version gratuite
merci

Commentaire de silverfab34 le 26/09/2007 09:31:07

Ok, j'ai corrigé le souci des sous menu !
Mais j'ai une question par rapport à l'integration de ce menu javascript dans une page HTML.
La position de ce menu n'est pas la meme sous les navigateurs Mozilla et sous IE ? Comment gerer ce souci ?
Merci.

Commentaire de polodemad le 06/02/2008 21:13:23

Bonjour,
Super script, mais pour moi c'est comme pour Marclio, comment fait on pour ouvrir un lien dans une nouvelle fenêtre ou frame???

merci Larion si tuas le temps de répondre ou y a t-il qlq d'autre qui à résolu mon souci ?

Commentaire de luludovicp le 24/01/2010 14:35:59

bonjour,
ou mettre le <target="_blank"> pour que celui-ci ouvre une nouvelle fenêtre ???

Commentaire de noob2 le 25/05/2010 10:13:23

Ok, c'est bon mon menu s'affiche, y aurai-t-il un moyen pour enlever les bordure et les fond des menu, car jusque là j'ai juste réussi à changer les couleurs ?

Merci