Menu en Javascript et rollover : pb de padding lors du survol

Menu en Javascript et rollover : pb de padding lors du survol - HTML/CSS - Programmation

Marsh Posté le 23-10-2003 à 23:26:13    

Hello à tous,
 
Je code un petit menu en cascade, en JavaScript...
 
ICI
 
C'est presque parfait (bon c'est pas fini) mais je cherche à savoir pourquoi lorsque je survole les items, ils s'écartent ..
je pense que c'est dû au fait que le rollover affiche une bordure, mais comment la faire prendre en compte dès le départ ?
 
 
Merci

Reply

Marsh Posté le 23-10-2003 à 23:26:13   

Reply

Marsh Posté le 23-10-2003 à 23:37:32    

Ptit coup de pub :) Inspire toi de ça, ptet que tu y arrivera plus facilement :  
 
http://www.magnin-sante.ch/journal [...] rtical.htm


---------------
mon blog : http://www.magnin-sante.ch/journal/
Reply

Marsh Posté le 23-10-2003 à 23:40:58    

Ta solution est basée sur des tableaux, sans changement de style de bordure lors du survol donc aucun problème.
Mais moi, je cherche à savoir pourquoi le rollover, lorsqu'il affiche la bordure, écarte les cellules .. j'aimerais bien faire rentrer ce facteur au début...

Reply

Marsh Posté le 24-10-2003 à 00:26:51    

Happy : La solution de fadenreturns n'utilise pas de tableaux mais des listes et des feuilles CSS.
Par contre ton menu a toi utilise des tableaux.
 
Si tu veux faire des menus utilise plustot des listes.
Je te conseille ces deux sites :
http://www.alsacecreations.com/articles
http://openweb.eu.org

Reply

Marsh Posté le 25-10-2003 à 01:28:04    

Ouais des listes. Le style est changé via CSS. Je te conseil de faire de même dans la mesure du possible.


---------------
mon blog : http://www.magnin-sante.ch/journal/
Reply

Marsh Posté le 28-10-2003 à 13:21:36    

Merci bcp :jap:
Je me suis inspiré du site de fadenreturns
et voici ce que ca donne :
 
http://zolico.homedns.org/sky/menu/menu.html
 
 
par contre j'aimerais bien que quelqu'un m'explique la fonction javascript, car j'ai beau l'étudier, je vois pas comment elle fonctionne, car une fois appellée apres le menu, elle n'est pas rappellée, donc je me demandais comment c'était possible .. affectation de comportements dynamiques sur chaque objet ?
enfin je comprends pas trop, et j'essaie de comprendre comment elle marche car j'aimerais implementer un dernier truc :
lorsqu'on entre dans un sous-menu, j'aimerais que l'item pere du sous menu reste selectionné ("allumé" ) comme dans le menu demarrer de windows :p
et ca j'arrive pas a le foutre dans le JS ... :'(
 

Code :
  1. function initmenu(){
  3.     var browser = navigator.userAgent;
  4.     browser = browser.toLowerCase();
  5.     browser = browser.split('/');
  6.     var version = browser[1].split('.');
  7.        
  8.     var menu = document.getElementById('menu');
  9.     var lis = menu.getElementsByTagName('li');
  10.     var uls = menu.getElementsByTagName('ul');
  11.    
  12.     for ( var i=0; i<lis.length; i++){
  13.    
  14.         var ul = lis.item(i).getElementsByTagName('ul');
  15.        
  16.         if ( ul.item(0) ){
  17.             /* for Internet Explorer and Opera6 */
  18.             if ( document.all && browser[0]!='opera' || browser[0]=='opera' && version[0]<7 ){
  19.              //lis.item(i).onmouseover = allume;
  20.                 lis.item(i).onmouseover = visible;
  21.                 lis.item(i).onmouseout = hidden;
  22.                 lis.item(i).onkeyup = visible;
  23.             /* for Browser */
  24.             }else if( document.getElementById ){
  25.                 lis.item(i).addEventListener("mouseover",visible,true);
  26.                 lis.item(i).addEventListener("mouseout",hidden,true);
  27.                 lis.item(i).addEventListener("blur",hidden,true);
  28.                 lis.item(i).addEventListener("focus",visible,true);
  29.                 }
  30.             }
  31.         }
  32.     }
  36. //ca c'est de moi  
  37. /*  
  38. function allume() {
  39.     var lien = this.getElementsByTagName('a');
  40.     a.item(0).style.background-color = "#D3E5FB";
  41.     a.item(0).style.border-color = "#316AC5";
  42. }
  43.   */ 
  44. function hidden(){
  45.     var ul = this.getElementsByTagName('ul');
  46.     ul.item(0).style.visibility = "hidden";
  47.     }
  48.    
  49. function visible(){
  50.     var ul = this.getElementsByTagName('ul');
  51.     ul.item(0).style.visibility = "visible";
  52.     }


Message édité par Happy Life le 28-10-2003 à 13:22:13
Reply

Marsh Posté le 29-10-2003 à 00:32:05    

Joli ton menu, il faudrait juste faire attention, car le menu se referme avec mozz et IE5. C'est juste un problème de décalage ou de bordure, je sais pas.  
 
Pour le style tu peux l'appliquer comme ça :
 
function visible(){
    var ul = this.getElementsByTagName('ul');
    ul.item(0).style.visibility = "visible";
    this.style.background = "red";
    }
 
et ouais les événements sont appliqués dynamiquement : http://www.magnin-sante.ch/journal [...] ncombrants


---------------
mon blog : http://www.magnin-sante.ch/journal/
Reply

Marsh Posté le 02-11-2003 à 10:58:12    

Ca a pas l'air de marcher ... :'(
pourtant ca a l'air bon puisqu'on demande a l'element survolé de mettre son fond en rouge ...

Reply

Marsh Posté le 02-11-2003 à 11:17:38    

Grailles un peu, tu vas finir pas y arriver.


---------------
mon blog : http://www.magnin-sante.ch/journal/
Reply

Marsh Posté le 02-11-2003 à 12:13:28    

ul.item(0).style.background = "red"; ca fout bien en rouge le sous menu [:banzai]
 
mais pour le pere, un this.style fait rien..

Reply

Marsh Posté le 02-11-2003 à 12:13:28   

Reply

Marsh Posté le 02-11-2003 à 12:25:07    

en tout cas pour le moment sous firebird ca donne pas grand-chose :/


---------------
.: Clône de Drasche .:. Ebichuleys .:. Avec l'Aloe Vera je fais de beaux cacas [:dawa] .: www.oserselancer.com :.
Reply

Marsh Posté le 02-11-2003 à 12:34:47    

Mozilla 1.4 : fonctionne a merveille...

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed