Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
3330 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°549159
Happy Life
Posté le 23-10-2003 à 23:26:13  profilanswer
 

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

mood
Publicité
Posté le 23-10-2003 à 23:26:13  profilanswer
 

n°549176
fadenretur​ns
Posté le 23-10-2003 à 23:37:32  profilanswer
 

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/
n°549186
Happy Life
Posté le 23-10-2003 à 23:40:58  profilanswer
 

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...

n°549219
cerel
Posté le 24-10-2003 à 00:26:51  profilanswer
 

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

n°550161
fadenretur​ns
Posté le 25-10-2003 à 01:28:04  profilanswer
 

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/
n°552486
Happy Life
Posté le 28-10-2003 à 13:21:36  profilanswer
 

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
n°553132
fadenretur​ns
Posté le 29-10-2003 à 00:32:05  profilanswer
 

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/
n°556613
Happy Life
Posté le 02-11-2003 à 10:58:12  profilanswer
 

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 ...

n°556617
fadenretur​ns
Posté le 02-11-2003 à 11:17:38  profilanswer
 

Grailles un peu, tu vas finir pas y arriver.


---------------
mon blog : http://www.magnin-sante.ch/journal/
n°556632
Happy Life
Posté le 02-11-2003 à 12:13:28  profilanswer
 

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

mood
Publicité
Posté le 02-11-2003 à 12:13:28  profilanswer
 

n°556635
urd-sama
waste of space
Posté le 02-11-2003 à 12:25:07  profilanswer
 

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 :.
n°556650
Happy Life
Posté le 02-11-2003 à 12:34:47  profilanswer
 

Mozilla 1.4 : fonctionne a merveille...


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
[biblio_links] documentation javascript[Javascript] Pb taille de fenêtre
[JavaScript] petit pb de syntaxe[Javascript] Commander la lecture d'une video
DIV tag et JavaScript[Javascript] Bons tutoriaux
menu dans page html[Motif] Popup Menu
Rollover: Css ou JS[html ou autre] barre de menu et bouton barre de tache animés...
Plus de sujets relatifs à : Menu en Javascript et rollover : pb de padding lors du survol

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.073 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR