jQuery Girl
  1. jQuery Girl
  3. Jquery animer un menu à trois niveaux
Intereting Posts
Comment conserver les valeurs lors de la navigation sur les pages à l’aide du composant de routage angular 1.5 quand il y a un délai d’attente à jQuery ajax, je veux exécuter une fonction Affichez différentes cartes avec l’événement onClick – Google Maps V3. différence entre $ et $ () dans jQuery Cliquez et faites glisser le curseur dans Chrome Quand est-ce que handleError a été retiré de jQuery? Faire en sorte que le positionnement CSS ne soit modifié qu’une seule fois Utilisation de Jquery Globalize avec MVC 5 La méthode jQuery scrollTop () ne fonctionne pas Maintien de l’ordre des demandes lors de plusieurs rappels ajax jQuery notation de tableau d’objects Jquery autocomplete commence à partir du premier caractère Comment rendre le contenu ajax explorable par les moteurs de recherche Attendez que plusieurs appels getJSON soient terminés Événement de clic du bouton central

Jquery animer un menu à trois niveaux

Je construis un menu composé de trois niveaux avec des animations en survol.

Voici un JSFIDLE de mon menu

Mes objectives:

1 – Lorsque l’utilisateur survole le menu principal principal, j’aimerais animer le deuxième niveau et fadein le contenu de tous les liens. Lorsque l’utilisateur quitte la section d’en-tête. Je voudrais effacer le contenu des liens et faire glisser en haut le deuxième niveau de menu. Remarque: je souhaite supprimer l’effet de file d’attente.

2 – Lorsque le deuxième niveau est visible (liens), si l’utilisateur clique sur la section about / contact, je glisse le troisième niveau de menu avec le contenu correct. Remarque: le deuxième niveau de menu doit restr visible. Si l’utilisateur clique sur le bouton de fermeture, je ferme le troisième niveau

3 – A tout moment, si l’utilisateur quitte la zone d’en-tête, je dois d’abord faire disparaître tout le texte, puis faire glisser en haut le deuxième et le troisième menu.

Toute aide serait très appréciée =) Merci

HTML: 

 
 
 
 
 
 
 
  
     
  • ABOUT
    •  
  • CONTACT
    •  
    •  
 
 
 
 
 
 
"ABOUT CONTENT
 
 
 
CONTACT
 
CONTENT

Mon JS: 

  jQuery("header").hover(function() { jQuery("#slidding-header-menu").slideToggle(); jQuery("#about").click(function() { jQuery("#slidding-about-contact-content").slideToggle(); }); });

Juste pour vous donner une idée: http://jsfiddle.net/S9Gpa/12/ , je suppose que vous allez le gérer vous-même pour faderOut les liens. Au fait: le hover est déconseillé. 

 jQuery("header").mouseenter(function () { jQuery("#slidding-header-menu").finish().slideDown(); }).mouseleave(function () { jQuery("#slidding-header-menu").finish().slideUp(); jQuery("#slidding-about-contact-content").finish().slideUp(); }); jQuery("#about").click(function () { jQuery("#slidding-about-contact-content").slideToggle(); });