Menu En Javascript

[Kobras]

Oui, mais ca c'est pas un bug. C'est juste que j'ai pas encore codé ca.
En esperant que quelqu'un d'autre ait une idée

[-Nicolas-]

Originally posted by Kobras@Mercredi 21 Juillet 2004, 01:31
En esperant que quelqu'un d'autre ait une idée

J'ai pas dit mon dernier mot hein, je vais regarder ça demain.
Par contre, 300Ko d'images c'est abusé quand même, surtout que certaines ne servent à rien. Enfin bon.

[Kobras]

oui, t'inquiete pas, il vas y avoir de l'optimisation

[NantoFirebird]

Je n'ai pas pu voir exactement ce que tu voulais dire car tu as déconnecté ton PC, mais je vais essayer de trouver 5minutes pour te refaire un script 0 bug ce matin ...

[Dinofly]

Pour ton curseur, essaie de mettre un attribut style="cursor:arrow" sur ton lien.

[Kobras]

Bon, mon serveur est de nouveau en marche.
Pour le style="cursor:arrow", ca marche pas.

[NantoFirebird]

'cursor: arrow', à priori çà n'existe pas. Essaye plutôt 'cursor: pointer'

Pour ton histoire de menu Kobras y'a un truc qui me chagrine, c'est que tu associes la classe ssmenu à tes div, mais j'ai pas l'impression qu'elle soit défini quelque part ... Donc soit tu linkes vers une feuille de style, soit tu la définis direct dans ta page.

Pour cette classe justement, essayes le style suivant :
[QUOTE]position:absolute;
overflow:hidden;
height:***px;
width:***px;
z-index:3;
visibility:hidden;
border=*px solid;QUOTE]
et oublie le display='none' pour voir ce qui se passe. Tu dois aussi placer tes divs dans ton code non pas toutes à la fin ou toutes au début, mais chacune à leur place, ie après chaque lien qui appelle ce sous-menu. Du coup dans le js tu dois supprimer toutes les définitions de position (top, left, et position: relative) pour rester raccord avec le style que je te propose.

Enfin, dans la fonction MontrerMenu, tu effectues l'opération suivante :

document.getElementById(strMenu).style.visibility= 'visible';

au lieu de ton display='inline' car c'est lui à tous les coups qui te génère ton espace vide.

Cà fait quelques modifications, mais normalement çà devrait marcher nickel. Si c'est pas clair, je te refais le script de A à Z, mais pas avant ce soir par contre, je suis plutôt occupé là ...

[Kobras]

Toutes les propriété des sous menu sont définit dans le menu.js dans la fonction chargement. On peut d'ailleur bien voir que cette fonction marche vue que les sous menu s'affiche bien la ou on veut et non en bas.
Si je met pas le display none, les sous menu vont tous s'afficher des le chargement de la page pour redisparaitre une fois le chargement fait via la fonction chargement du menu.js
Sinon faut surtout pas que je mette en position absolute car vue que le graphisme du site est centré, en absolute suivant les résolution d'écran de l'utilisateur les menu serait à chaque fois positionné diférenment par rapport au site lui meme.
Pour le display, faut pas que je mette de visibility car comme je l'avais dis y'as 2 semaines, le visibility hidden, fait aparaitre un vide au chargmeent au lieu de rien du tout. et donc pour résoudre ce pb, dino m'avais conseillé un display:none et du coup faut aussi que j'utilise le display pour faire réaparaitre le sous menu.
Enfin pour le cursor:pointer, ca marche pas non plus.

[Dinofly]

J'ai dit cursor: arrow comme ça, en fait je n'ai pas cherché à savoir si ca existait. C'était juste pour dire qu'il faut mettre un style cursor

Tiens voilà ce qui existe:
http://www.echoecho.com/csscursors.htm

[Kobras]

merci pour le cusrseur, ca marche impec

[NantoFirebird]

Le 'cursor:pointer' c'est du CSS2 dixit selfhtml, c'est peut-être çà qui chie.

Pour la position absolute en effet, mais tu peux néanmoins recalculer la position en récupérant la largeur intérieure du navigateur. Je suis à peu près sûr que le display inline couplé à une position relative est la cause de ces espaces. Enfin pour le style et la façon de faire que je te propose, c'est extrait d'un truc que j'ai fait et qui marche nickel, c'est pour çà que je te l'ai proposé justement. Maintenant je vais essayer de te faire une démo ce soir, comme çà tu verras si çà te branche ou pas

[NantoFirebird]

Tiens j'avoue ne pas avoir tenu jusqu'à ce soir Comme au boulot je n'ai pas l'accès à mes FTP je te met le code direct ici, çà permettra aux autres de l'améliorer le cas échéant

<&#33OCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
</head>

<body>
&#60;script language="javascript">
var blnOk=true;

function MontrerMenu(strMenu) { 
  if(blnOk) {
    CacherMenus();
   
    document.getElementById(strMenu).style.visibility= &#39;visible&#39;;
  }
}

function CacherMenus() {
  if(blnOk) {
    for(i=1;i<=3;i++) {
      document.getElementById("ssmenu"+i).style.visibili ty=&#39;hidden&#39;;
    }
  }
}
</script>
<center>
<table>
<tr>
  <td height=&#39;50px&#39; width=&#39;200px&#39; bgcolor="#0033FF">
  <div onMouseOver="MontrerMenu(&#39;ssmenu1&#39">Menu 1</div>
  </td><td width=&#39;0&#39;>
  <div id=&#39;ssmenu1&#39; style=&#39;position:absolute;overflow:hidden;heigh t:150px;width:300px;z-index:3;visibility:hidden;border=2px solid;background-color:red;&#39; align=center>Menu1

Menu2

Menu3</div>
  </td>
</tr>
<tr>
  <td height=&#39;30px&#39; bgcolor="#00FF33">
  <div onMouseOver="MontrerMenu(&#39;ssmenu2&#39">Menu 2</div>
  </td><td width=&#39;0&#39;>
  <div id=&#39;ssmenu2&#39; style=&#39;position:absolute;overflow:hidden;heigh t:150px;width:300px;z-index:3;visibility:hidden;border=2px solid;background-color:red;&#39; align=center>Menu1

Menu2</div>
  </td>
</tr>
<tr>
  <td height=&#39;720px&#39; bgcolor="#8833FF">
  <div onMouseOver="MontrerMenu(&#39;ssmenu3&#39">Menu 3</div>
  </td><td width=&#39;0&#39;>
  <div id=&#39;ssmenu3&#39; style=&#39;position:absolute;overflow:hidden;heigh t:150px;width:300px;z-index:3;visibility:hidden;border=2px solid;background-color:red;&#39; align=center>Menu1

Menu2

Menu3

Menu4</div>
  </td>
</tr>
</table>
</center>
</body>
</html>

Pas encore testé sous Mozilla, mais çà marche sans pb sous IE

[-Nicolas-]

Euh ... la position absolue dépand du conteneur, pas du navigateur (si le conteneur est lui même "positionné").
Petite révistion sur les positions en CSS
http://openweb.eu.org/mise_en_page/
http://www.alsacreations.com/blog/index.ph...nnement-choisir
http://www.alsacreations.com/blog/index.ph...osition-absolue

[NantoFirebird]

oui c&#39;est parce qu&#39;à la base je ne pensais pas les placer dans une cellule quand j&#39;en ai parlé
celà dit, toute doc est bonne à prendre ...

[Kobras]

Bon, effectivement en mettant en absolue à la place de relative, j&#39;ai plus le problème du vide en bas.
Par contre comment faire pour éviter que les sous menu aient des position latéral differente suivant la résolution de l&#39;utilisateur?
Tu m&#39;as parlé de détecter la résolution du navigateur, comment faire?
Sinon dans une des pages que Nicolas a posté, j&#39;ai crus comprendre qu&#39;on pouvais changer l&#39;endroit d&#39;ou parte chaque bloc en absolut et que ce soit pas forcement le coin haut gauche du navigateur mais par exemple au premier pixel du coin haut gauche du table de mon site.