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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Menu tooltips avec un comportement bizarre: jQuery

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Menu tooltips avec un comportement bizarre: jQuery

n°2072359
redah75
Posté le 28-04-2011 à 13:40:31  profilanswer
 

Bonjour,
 
j'aimerais mettre en place un menu comme sur http://store.apple.com/fr (Aide, Votre compte, Voir panier) a l'aide de jquery mais j'ai un peu de mal.
voici en gros ce que j'ai fait:

Code :
  1. //Code html
  2. <ul id="menu">
  3.     <li><a href="javascript:;" id="menu1">Menu 1</a></li>
  4.     <li><a href="javascript:;" id="menu2">Menu 2</a></li>
  5.     <li><a href="javascript:;" id="menu3">Menu 3</a></li>
  6. </ul>
  7. // contenu menu 1
  8. <div id="tt-menu1" class="menu-sub-tt">
  9.     <ul class="my-list">
  10.         <li><a href="lien.html">Titre 1 menu 1</a></li>
  11.         <li><a href="lien.html">Titre 2 menu 1</a></li>
  12.         <li><a href="lien.html">Titre 3 menu 1</a></li>
  13.     </ul>
  14. </div>
  15. // contenu menu 2
  16. <div id="tt-menu2" class="menu-sub-tt">
  17.     <ul class="my-list">
  18.         <li><a href="lien.html">Titre 1 menu 2</a></li>
  19.         <li><a href="lien.html">Titre 2 menu 2</a></li>
  20.         <li><a href="lien.html">Titre 3 menu 2</a></li>
  21.     </ul>
  22. </div>
  23. // contenu menu 3
  24. <div id="tt-menu3" class="menu-sub-tt">
  25.     <ul class="my-list">
  26.         <li><a href="lien.html">Titre 1 menu 3</a></li>
  27.         <li><a href="lien.html">Titre 2 menu 3</a></li>
  28.         <li><a href="lien.html">Titre 3 menu 3</a></li>
  29.     </ul>
  30. </div>
  31. // Code jquery
  32. $("#menu-sub a" ).hover(function() {
  33. $(this).addClass("menu-sub-active" );
  34. $("#tt-" + $(this).attr('id')).stop(true).fadeTo(300, 1);
  35. }, function() {
  36. $(this).removeClass("menu-sub-active" );
  37. $("#tt-" + $(this).attr('id')).stop(true).fadeTo(300, 0, function() { $("#tt-" + $(this).attr('id')).hide(); });
  38. });
  39. $(".menu-sub-tt" ).mouseenter(function () {
  40. $(this).stop().show();
  41. }).mouseleave(function () {
  42. $(this).stop().fadeTo(400, 0, function() { $(this).hide(); });
  43. });


 
je ne mets pas les css car tout est bien affiché.
Lorsque je survole le menu, tout marche bien, mais le probleme est quand je deplace la curseur sur le contenu du menu (#tt-menu1, #tt-menu2 et #tt-menu3) que j'ai un comportement bizarre. sauriez vous ce qui ne va pas? o auriez vous une maniere meilleur et plus propre de le faire?
voici l'url pour voir de quoi je parle: http://www.moroccan-arts.fr/test-menu.php
 
En vous remerciant par avance.


Message édité par redah75 le 28-04-2011 à 13:41:06
mood
Publicité
Posté le 28-04-2011 à 13:40:31  profilanswer
 

n°2072399
gelatine_v​elue
Posté le 28-04-2011 à 17:28:59  profilanswer
 

IL me semble que tu caches le menu des que tu sors de la case survolée, donc c'est normal.

n°2072401
redah75
Posté le 28-04-2011 à 17:32:40  profilanswer
 

une solution?? ou un meilleur code?? :D

n°2072409
gelatine_v​elue
Posté le 28-04-2011 à 18:06:32  profilanswer
 

Ben enlève ça:
 
".mouseleave(function () {
$(this).stop().fadeTo(400, 0, function() { $(this).hide(); })"

n°2072415
redah75
Posté le 28-04-2011 à 18:32:18  profilanswer
 

ca ne change rien!

n°2072430
redah75
Posté le 28-04-2011 à 20:01:35  profilanswer
 

j'ai finalement pu resoudre le probleme, et voici le code jQuery si quelqu'un se trouve dans le meme cas:

Code :
  1. $("#menu-sub a" ).hover(function() {
  2.  $(this).addClass("menu-sub-active" );
  3.  $("#tt-" + $(this).attr('id')).stop(true).fadeTo(300, 1);
  4. }, function() {
  5.  $(this).removeClass("menu-sub-active" );
  6.  $("#tt-" + $(this).attr('id')).stop(true).fadeTo(200, 0, function() { $(this).hide(); });
  7. });
  8. $(".menu-sub-tt" ).hover(function() {
  9.  var link_active = $(this).attr('id').substr(3);
  10.  $("#menu-sub a#" + link_active).addClass("menu-sub-active" );
  11.  $(this).stop(true).show().fadeTo(300, 1);
  12. }, function() {
  13.  $("#menu-sub a" ).removeClass("menu-sub-active" );
  14.  $(this).stop(true).fadeTo(200, 0, function() { $(this).hide(); });
  15. });


MErci en tout cas


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

  Menu tooltips avec un comportement bizarre: jQuery

 

Sujets relatifs
logo header et menumenu déroulant
[Pb] Affichage d'un menu avec un effet carrouselMenu positionnement différent sur IE et Firefox + Problème de bordure
comportement étrange de BIGNUMModification/amélioration menu contextuel gtk (C++?)
Menu Wamp[JAVA] Menu lié à une animation
Menu Dynamique recursif php/mysqlJSF Tomahawk menu
Plus de sujets relatifs à : Menu tooltips avec un comportement bizarre: jQuery


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