[CSS3] Pb de remonté menu animé

Pb de remonté menu animé [CSS3] - HTML/CSS - Programmation

Marsh Posté le 11-02-2012 à 19:50:37    

Bien le bonjour... :jap:

 

J'ai réalisé un menu déroulant en usant de CSS3. Voila sa trombine :

 

http://img850.imageshack.us/img850/4985/bugkj.jpg

 

En mettant le pointeur sur l'item3, la bulle rouge (sous menu) descend. La flèche rouge pointe sur l'item2 au lieu de l'item3, c'est un décalage, mais en rien le problème posé ici.

 

Le vrai problème a lieu durant la remonté de la bulle rouge (mon sous menu donc). Si je garde le pointeur sur item3, la bulle reste en place (normal). Si je vais sur la bulle, elle reste encore en place (toujours logique). Si je vais sur les item1, 2, 4 elle doit remonter en toute logique là aussi.

 

Le problème est qu'en remontant, le pointeur "capte" les sous-item de la bulle rouge qui redescend alors, pour remonter quand ils ne sont plus sous le pointeur, puis redescendre, etc... Bref ça oscille, c'est très désagréable et pas propre. :/

 


Je voulais donc savoir s'il existait une combine pour éviter que le pointeur ne capte le sous menu dans sa remonté.

 

Je voudrais cependant :

  • Éviter de changer la nature du déplacement du sous menu.
  • Éviter de faire passer le sous menu sous le menu (comme ça se fait couramment).


Merci si vous avez une petite piste à me communiquer. :jap:


Message édité par Cver1 le 11-02-2012 à 19:52:35
Reply

Marsh Posté le 11-02-2012 à 19:50:37   

Reply

Marsh Posté le 11-02-2012 à 19:53:11    

Bonsoir.
Sans page d'exemple, c'est un peu difficile à comprendre et donc à debugger.
C'est un menu 100% en css sans js ?

Reply

Marsh Posté le 11-02-2012 à 20:24:04    

Bonsoir.

 

Je ne voyais pas l'intérêt de montrer le CSS dans ce cas précis. J'utilise

 

.header-wrapper-menu-item ul {
 top: -10em;
 opacity:0;
 -o-transition: 0.5s top, 0.5s opacity;
 }
.header-wrapper-menu-item:hover ul {
 top: 4em;
 opacity:1;
 -o-transition: 0.5s top, 0.5s opacity;
 }

 

J'ai usé uniquement du préfixe pour Opera pour le moment étant donné que c'est mon seul navigateur qui prend en charge CSS3. Le site n'est pas hébergé pour le moment.

 

Donc non, il n'y a pas de JS pour le menu. Uniquement du CSS3.


Message édité par Cver1 le 11-02-2012 à 20:24:20
Reply

Marsh Posté le 11-02-2012 à 21:40:09    

Cet exemple semble fonctionné correctement : http://jsfiddle.net/nVZwB/8/

Reply

Marsh Posté le 12-02-2012 à 02:12:38    

dagum a écrit :

Cet exemple semble fonctionné correctement : http://jsfiddle.net/nVZwB/8/


Oops... :d

 

Merci pour l'exemple mais dedans mon problème ne se pose pas étant donné qu'ici les items des menus enfants sont de même largeur que les items parents. J'aurais du y penser, c'est en remplaçant les item par leur norm final que le problème se pose de manière évidente.

 

Alors la bulle rouge passe entre le menu noir et le pointeur, le pointeur accroche les items de la bulle qui redescend avant de remonter, etc...


Message édité par Cver1 le 12-02-2012 à 02:13:55
Reply

Marsh Posté le 12-02-2012 à 08:44:16    

Ok je vois. Tu peux poster un morceau du code html du menu ?

Reply

Marsh Posté le 13-02-2012 à 17:05:14    

C'est un peu (beaucoup) le bordel mon code là. :d
 
On va faire plus simple. Je vais y mettre de l'ordre, et mettre en ligne le site (et son bug) dans une ou deux semaines. Je remonterai alors ce sujet. :d

Reply

Marsh Posté le 29-02-2012 à 12:19:09    

Donc me revoila et mon site : http://www.chambre-noire.net/
 
Comme on peut le voir le menu descend bien lorsque l'on pointe l'item "tutoriels". Mais dès que l'on passe le pointeur sur galerie par exemple, la remontée du sous menu est difficile. C'est normal à la vue du code mais évidement non souhaité. Il y a une astuce pour éviter ça ?

Reply

Marsh Posté le 01-03-2012 à 13:10:12    

Dernier petit up : personne n'a d'idée ? (sans avoir à modifier l'apparence)
 
Sans quoi je laisserai l'animation pour la descente et je supprimerai l'animation en remontée.

Reply

Marsh Posté le 08-03-2012 à 00:14:02    

Drapo pr regarder le code demain quand je serais sur le Mac, sur iPhone cay plus compliqué ^^


---------------
Les hommes construisent trop de murs et pas assez de ponts. Isaac Newton
Reply

Marsh Posté le 08-03-2012 à 00:14:02   

Reply

Marsh Posté le 08-03-2012 à 09:56:42    

Essaye ça:
 

Code :
  1. .header ul#header-wrapper-menu li a:hover ul {
  2. TON CSS
  3. }


 
Cependant tu pourrais facilement simplifier et optimiser ton code HTML et ton CSS, en n'appellant que les éléments au lieu de leur assigner un ID. Les ID sont surtout utile pour les ancres et le JS.
 
Par exemple:
 
.header ul li a:hover


---------------
Les hommes construisent trop de murs et pas assez de ponts. Isaac Newton
Reply

Marsh Posté le 10-03-2012 à 01:22:46    

GoldAdvance a écrit :

Essaye ça:
 

Code :
  1. .header ul#header-wrapper-menu li a:hover ul {
  2. TON CSS
  3. }




 
 
Je n'ai pas plus de succès avec un  
 

#header ul li a:hover ul


Ça ne fait d'ailleurs même pas baisser le sous menu. Avec :

#header ul li:hover ul


Le problèmes est le même que celui de mon premier post (logique donc).  

GoldAdvance a écrit :


Cependant tu pourrais facilement simplifier et optimiser ton code HTML et ton CSS, en n'appellant que les éléments au lieu de leur assigner un ID. Les ID sont surtout utile pour les ancres et le JS.
 
Par exemple:
 
.header ul li a:hover


C'est alambiqué mais je m'y retrouve mieux comme ça.  
 
Il y a une différence de perf ? :??:
 
Merci en tout cas, je crains qu'il n'y ai pas de solution, l'effet étant parfaitement normal. :jap:

Reply

Marsh Posté le 10-03-2012 à 11:46:28    

Peut-être en essayant avec les pseudo classes apparues avec le CSS3 mais j'y crois moyen...
 
Sinon au niveau des perfs non il n'y aura pas de différences au niveau performance mais c'est surtout pour moins se faire chier avant pendant et après.
 
Par exemple, tu peux découper chaque partie du site en:
 
- header
-section 1
- section 2
- section 3, etc...
- footer
 
Dans ton CSS:
 
Tu n'appelle que la classe ou le type d'élément que tu veux mettre en forme suivi des éléments enfants, par exemple pour modifier la couleur du lien contenu dans les puces de ton menu situé dans le header:
 

Code :
  1. header ul li a {
  2.      color: rgb(255,255,255);
  3. }


 
Mais pour cela il faut que dans ton code HTML le header ressemble à ça:
 

Code :
  1. <header>
  2.     <ul>
  3.            <li><a href="xxxx">XXX</a></li>
  4.            <li><a href="xxxx">XXX</a></li>
  5.            <li><a href="xxxx">XXX</a></li>
  6.     </ul>
  7. </header>


 
Oui bien créer une règle commune pour chaque section:
 

Code :
  1. section {
  2.     background: #000;
  3.     font-size: 18px;
  4. }
  5. section h1 {
  6.      color: #FFF;
  7. }


---------------
Les hommes construisent trop de murs et pas assez de ponts. Isaac Newton
Reply

Marsh Posté le 16-03-2012 à 01:02:49    

Au fait, merci pour ton message. J'avais oublié de revenir la dessus.  
 
Peut être ajouterai je une couche de JS pour résoudre mon problème.  
 
 [:cver1:1]

Reply

Sujets relatifs:

Leave a Replay

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