Bonjour à vous !

Alors voilà, j'ai un petit problème de zone de survol si je puis dire. Sur mon forum (ici) j'ai des onglets déroulants sur le côté droit. Le problème étant que j'ai beaucoup de mal à réduire la zone de survol (je suis très peu à l'aise avecle javascript malheureusement), je souhaiterais que les onglets ne se déroulent que lorsqu'on est sur l'onglet et non une cinquantaine de pixels avant. C'est assez gênant pour mes membres avec des écrans réduits, ils ne peuvent plus éditer leurs messages, car les onglets se déroulent dès qu'ils vont trop à droite de leur écran =/

Voici mon javascript :



Mon code html :



Et mes CSS :



J'ai tenté avec chaque code en modifiant les largeurs, mais ça n'a jamais rien donné de probant T_T

Je précise que j'ai trouvé ces codes il y a plusieurs années sur un forum fermé depuis, du coup je ne peux pas vraiment dire si le codage est digne de confiance ou non, comme dit, le javascript je débute à peine dedans.

Merci d'avance de votre attention ♥

Bonsoir,

Oui ma question est toujours d'actualité.
Merci d'avance !

Hello,

Le problème vient de la façon dont le code a été conçu.

Le code utilise une marge latérale pour forcer les boites à se "cacher" sur le côté tant qu'elles ne sont pas survolées, et cette marge fait partie de la zone à survoler pour révéler les boites. Le bon côté est que si je JS est désactivé, le contenu des boites est toujours visible. Le mauvais côté est donc le souci que tu mentionnes.

Une méthode possible serait donc de jouer sur le positionnement de départ plutôt que de compter sur le javascript pour "pousser" les boites sur le côté. Personnellement, j'opterais également pour une solution full CSS3 pour ce genre de truc mais bon '_'

1. Modifie le right:0 du div#conteneur (sans le div devant ça marcherait très bien au fait) pour que la position du bloc soit "poussée" vers l'extérieur de la fenêtre. Donc en gros, mets une valeur de -85px.
   
2. Rajoute un padding-left:0; pour #conteneur ul, ça supprime une marge par défaut non nécessaire.
   
3. Et dans ton javascript, plutôt que 85,2 et 85, mets plutôt 0, -85 et 0. En fait, tu peux même virer la première partie du code et te contenter de ça :

   Code:

   $(function () {
       $('#conteneur > ul').hover(
   
       function () {
           $('li', $(this)).stop().animate({
               'marginLeft': '-85px'
           }, 200);
       },
   
       function () {
           $('li', $(this)).stop().animate({
               'marginLeft': '0px'
           }, 200);
       });
   });

C'est pas génial comme solution, et loin d'être accessible, mais ça marche.

Bonjour !

Désolée du retard, weekend chargé >.<
Avec ces explications je comprends mieux mon problème du coup xD J'ai modifié en conséquence et c'est parfait avec ça, mes membres ne se plaignent plus désormais !

Merci beaucoup de l'explication et de l'aide apportée !

Tant mieux, j'archive le sujet