Discussion :

[Cver1]

Bien le bonjour.

J'ai réalisé un menu qui me pose problème. Celui ci est composé d'un menu général horizontal, auquel l'un de ses items est lié à un menu vertical qui prend la forme d'une bulle rouge déroulante.

Le site est en ligne à cette adresse : http://www.chambre-noire.net/

En me plaçant sur l'item tutoriel, le sous-menu descend en ne proposant qu'un seul et unique (pour le moment) sous-item. Rien de grave donc.

Le problème vient en fait de la remontée du sous-menu. Si vous allez de l'item tutoriels à l'item galerie, le sous-menu va remonter laborieusement. Il va en fait accrocher le pointeur de la souris qui est placé sur galerie dans cet exemple. Il va alors faire un jeu de remontées / redescentes rapides et disgracieuses.

J'ignore évidemment comment résoudre ce problème. J'aimerais du moins, conserver cette apparence pour mon sous menu (animation et apparence).

Je vous donne quelques éléments des codes HTML et CSS.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<div id="header">
   <div id="header-wrapper">
      <a href="/accueil.php" title="Page d'accueil" id="header-wrapper-logo" name="top">Chambre-Noire.net</a>
      <ul id="header-wrapper-menu">
         <li class="header-wrapper-menu-item" style="width:5.8em;">
            <a href="/accueil.php" title="Page d'accueil" style="color:white;">ACCUEIL</a>
         </li>
         <li class="header-wrapper-menu-item" style="width:5.8em;">
            <a href="http://www.flickriver.com/photos/cver1" title="Ma galerie Photographique personelle" style="color: gray;">GALERIE</a>
         </li>
         <li class="header-wrapper-menu-item" style="width:7.0em;">
            <a href="" style="color:gray;">TUTORIELS</a>
         <ul>
            <li>
               <a href="/tutorials/tuto-fr-001-00-06-le_developpement_d_un_film_noir_et_blanc.php">Le développement d'un film Noir et Blanc</a>
            </li>
         </ul>
      </li>
         <li class="header-wrapper-menu-item" style="width:6.4em;">
         <a href="/contact.php" title="Une question ? Une remarque ? N'hésitez pas à me contacter." style="color:gray;">CONTACT</a>
         </li>
      </ul>
   </div>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
.header-wrapper-menu-item:hover ul {
   display: block;
   top: 4em;
   opacity: 1;
   transition: 0.5s top, 0.5s opacity;
   -o-transition: 0.5s top, 0.5s opacity;
   -moz-transition: 0.5s top, 0.5s opacity;
   -webkit-transition: 0.5s top, 0.5s opacity;
   }
 
.header-wrapper-menu-item ul {
   /*display: none;*/
   position: absolute;
   top: -10em;
   width: 7em;
   padding: 0;
   opacity: 0;
   transition: 0.5s top, 0.5s opacity;
   -o-transition: 0.5s top, 0.5s opacity;
   -moz-transition: 0.5s top, 0.5s opacity;
   -webkit-transition: 0.5s top, 0.5s opacity;
   z-index: 2;
   }

[philodido]

Bonjour,

Ouai ça fait un effet ping-pong sous firefox, sous ie l'effet ne fonctionne carrément pas puisque qu'ie ne gère pas ce genre de truc (normal, c'est ie quoi), mais sous chrome ça fonctionne plutôt bien. Après un certain temps passé à faire des tests notamment en donnant des id différents pour chaque item, je n'ai malheureusement pas trouvé de solution . N'hésite pas à poster si tu trouve LA solution. Bon courage.

[Cver1]

Merci pour ta réponse. Pas de solution à ce jour donc.

Je pense que je vais abandonner la remontée du sous-menu, celui ci disparaîtra tout simplement au lieu de remonter.

[philodido]

Après tu as toujours la possibilité de le faire en js avec des frameworks genre Mootools. Par exemple pour déplacer un élément qui aurait l'id item1 de gauche à droite et de droit à gauche (de 5 pixels) au survole du curseur et au sortir du curseur ça donnerait quelque chose comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$('item1').set('tween', {duration: 200, transition: Fx.Transitions.linear}).addEvents({
mouseover: function(){this.tween('right', 75);},
mouseout: function(){this.tween('right', 70);}
});

Bien évidement il faut télécharger et appeler les bibliothèques Mootools avant.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<script src="scripts/mootools_1.2.3-core-nc.js" type="text/javascript">
<script src="scripts/mootools_1.2.3.1-more-nc.js" type="text/javascript">

Si ça t'intéresse voici la doc : http://mootools.net/docs/core
Et le forum sur développez : http://www.developpez.net/forums/f11...orks/mootools/

... et c'est sensé fonctionner sur tous les navigateurs, même ie

[Cver1]

Merci, je garde l'idée.

[Invité]

Bonjour,
essaye comme ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#header-wrapper {
    height: 6em;
    margin: 0 auto;
    width: 1000px;
    position: relative;
    z-index: 2;
}
.header-wrapper-menu-item ul {
    -moz-transition: top 0.5s ease 0s, opacity 0.5s ease 0s;
    opacity: 0;
    padding: 0;
    top: -40em;
    width: 7em;
    position: absolute;
    z-index: -2;
}

L'idée était de faire passer le sous-menu mobile SOUS le menu horizontal.

[Cver1]

Bonjour.

Un grand merci jreaux62 et milles excuses pour le retard. J'allais finir par me faire une raison et supprimer l'animation. Ton code marche parfaitement.