Tutoriel vidéo jQuery : Menu animé avec jQuery

Dans ce tutoriel vidéo vous apprendrez à utiliser jQuery et le plugin BackgroundPosition Animation pour améliorer les effets de survol de vos bouton. Le principe sera de faire défiler derrière le bouton une image spéciale (un dégradé par exemple) pour créer différents types d'effets.

Démonstration

Tags : JqueryAnimationMenuPlugin

Tutoriel jQuery posté Mercredi 20 Janvier 2010
 38 Commentaires
Ils l'ont utilisé
Vos commentaires

zaibon (Mercredi 20 Janvier 2010 à 12:43):

Parfait, moi qui devait justement refaire mon menu !

Corentin (Mercredi 20 Janvier 2010 à 13:39):

TUTO MAGNIFIQUE !!!

Baptiste (Mercredi 20 Janvier 2010 à 13:48):

Et bin nickel! tout simple, efficace, et c'est encore un petit truc qui fait la différence!
Bravo et continue a donner ces petits trucs assez simple mais qui changent tout!

@+

Nath (Mercredi 20 Janvier 2010 à 13:50):

amusant je suis tombé sur la page demo de ce plugin hier.. vraiment pas mal ce faux flash

olivier (Mercredi 20 Janvier 2010 à 13:56):

Enorme et plutôt simple!
Merci!

nsink (Mercredi 20 Janvier 2010 à 13:59):

Super comme d'hab ! merci

likeo (Mercredi 20 Janvier 2010 à 15:19):

C'est un peu le même principe que le tuto de la lueur ?

leknoppix (Mercredi 20 Janvier 2010 à 15:23):

Vraiment sympa ce menu.

Djiins (Jeudi 21 Janvier 2010 à 00:06):

Et bien en forme on enchaine les super tutos en ce moment

pacintosh (Jeudi 21 Janvier 2010 à 00:31):

Yep idem, ça tombe bien car je cherchais aussi des idées pour mettre en place un menu stylé

hammond68 (Jeudi 21 Janvier 2010 à 14:38):

sympa ce tuto !

mais pourquoi tu ne les annonce plus dans la partie blog comme avant ?

NiKO (Jeudi 21 Janvier 2010 à 16:41):

Il n'y aurait pas un fichier zip avec le contenu de ce tuto de disponible ? Car les vidéos DailyMotion, même agrandie au maximum ne permettent pas de bien lire le code js à taper...

Merci beaucoup d'avance !

Baptiste (Jeudi 21 Janvier 2010 à 16:57):

as tu activé la HD? il y a un rectangle en hautou tu dois avoir marqué HD is off... Moi ça face nickel sur un 20"!

@+

NiKO (Jeudi 21 Janvier 2010 à 17:50):

Aah ben oui, carrément
Sur un 23" ça passe aussi lol.

Sarathai (Jeudi 21 Janvier 2010 à 21:57):

Salut,
alors depuis que DailyMotion a changé son player et bien il m'est impossible d'avoir du son sur la vidéo, mais j'ai l'image ^^
Je suis sur Linux Ubuntu..
Help

Sarathai (Jeudi 21 Janvier 2010 à 22:02):

C'est bon, ça marche... Va savoir comment ^^

Cédric (Jeudi 21 Janvier 2010 à 22:50):

Merci pour ce tutoriel !! Vraiment super !

asm (Vendredi 22 Janvier 2010 à 19:07):

Bravo pour ce tuto encore une fois très utile et très classe

Merci à toi

Xeron (Samedi 23 Janvier 2010 à 20:37):

Salut comme toujours, tout d'abord , supr tuto :D . En plus bien expliqué , seulement je suis vraiment nul au niveau de javascript, si quelqu'un pouvait me passer le code à mettre car je voit rien en plus je confond tout les parenthèses avec les accolades etc... vraie misère j'espèr que quelqu'un pourra m'aider =) .

Merci , et merci pour ce menu , moi qui avait pas du tout d'idée ^^'

Alex-D (Dimanche 24 Janvier 2010 à 19:46):

Dans ce tutoriel vidéos => Dans ce tutoriel vidéo

boardingnow (Lundi 25 Janvier 2010 à 05:03):

Superb MERCI

AmaSan (Samedi 06 Février 2010 à 13:00):

Salut

Bon j'ai une question un petit peu hors sujet mais bon >_<
Je la pose ici car ça sera con ailleurs vu c'est en lien avec ce tuto.
En fait sur ma page html, j'ai 2 menu, un ul de class choix et un de class menugallery (c'est celui ci qui reprend ce tuto) et en fait au niveau du css il y a gros conflit...
Pourtant j'ai bien mis ".choix a li" et ".menugallery a li". J'ai même fait 2 fichier a part...
Si quelqu'un pourrai m'aider...Parce que ça me parait louche que l'on puisse pas définir 2 argument différent pour plusieurs menu différent.

Merci beacoup d'avance et continue ton magnifique travail ^^

@ +

hellsingblack (Samedi 06 Février 2010 à 14:13):

Je vous savoir, quel est le plugin que tu utilise pour les synthaxes automatique, c'est a dire quand tu écris une fonction il te donne le choix entre plusieurs autre qui commence par la même lettre.

Ravi (Mardi 23 Février 2010 à 11:03):

Merci

selekta (Mercredi 10 Mars 2010 à 20:40):

Cimer c'est super frais !!
La classe,mais dommage que vous fournissez pas le fichier source ca aurait été plus rapide ^^
Mais bon la on apprends au moin"sss" ^^,mais je tiens a dire que c'est pas évident de voir les codes du javascript sur la vidéo mais super bon tuto!!
Et xeron si tu veux toujours le javascript je peux te le passer si tu veux !!
Merci encore a grafikart

Badbart (Mercredi 10 Mars 2010 à 22:51):

La source est dispo pour ceux qui sont dispo à soutenir l'auteur avec un compte premium

SirCloud (Lundi 15 Mars 2010 à 19:06):

Encore une fois mille merci pour ce tuto vachement bien!

nintenwii (Dimanche 21 Mars 2010 à 23:47):

Salut,
j'ai bidouillé le code pendant près d'une heure et pas moyen de définir un temps à l'animation.
Le rollover marche très bien à l'horizontal, mais lorsque que je veux faire monter progressivement une image à la verticale, il n'y a aucune animation qui s'applique, l'image monte comme si on ne mettait qu'un :hover, si vous voyez ce que je veux dire.

Donc je ne sais pas à quoi c'est du, si tu as une explication je suis preneur.

@+

Mickael (Mardi 23 Mars 2010 à 23:00):

Nous avons rédigé un article sur le plugin de jquery permettant d'effectuer des dégradés de couleurs dans les BG des DIV

http://www.outils-du-web.com/2010/03/jquery-effets-de-couleurs-degrades.html

Alex (Mardi 04 Mai 2010 à 10:39):

Merci et bravo pour ce tuto

Tatoum (Dimanche 16 Mai 2010 à 19:23):

Je ne remercierais jamais assez ceux qui prennent de leur temps pour penser aux autres sans qu'il y ait une relation commerciale. Je suis très heureux d'avoir pu bénéficier de ce tutoriel. Merci

Nico (Mercredi 19 Mai 2010 à 15:02):

Merci raton laveur. Merci.

Nico (Jeudi 20 Mai 2010 à 17:41):

Salut à tous,

Merci pour ce tuto, simple et efficace.

J'ai cependant une question, est-il possible de créer ce menu en le faisant monter au lieu de descendre?

Merci à tous ceux qui une idée.

Nemocat (Mardi 29 Juin 2010 à 17:49):

Bravo et merci pour ce tuto. Je débute en jquery et il est très simple à comprendre. Par contre, j'ai beau chercher mais je ne trouve pas comment faire en sorte que ça se déplace de gauche à droite et non de haut en bas (j'ai une image de fond en longueur).

Si quelqu'un à la réponse, merci d'avance !

Mikdo (Mercredi 07 Juillet 2010 à 14:48):

Super TUTO Un grand merci .
Tout est dans la simplicité ;-)

brekiano (Mercredi 07 Juillet 2010 à 17:11):

j'arrive pas a voir les videos? est ce qu'il manque un plugin pour mon browser?

Nicolas FORMOSO (Dimanche 25 Juillet 2010 à 19:25):

Vraiment génial, merci pour ton esprit de partage !

joe le rigolo (Lundi 26 Juillet 2010 à 00:31):

Clair, précis et instructif.

Merci, tout simplement.

Et pour celui qui avait posé une question sur la possibilité de faire l'effet vers le bas (et non vers le haut), suffit de :
1- créer ton image de façon à avoir la partie à afficher en premier lieu (donc celle qui à 25px de hauteur) en bas de l'image complète (et non en haut comme dans le tuto).

2- Dans le fichier css, tu mets une position 0px -225px (ces valeurs, je les mets intuitivement, ajuster s'il le faut)

3- Dans le script, lorsque tu anime la position de l'image, mets pour la première fonction:{backgroundPosition: 0px 0px}, et pour la seconde: {backgroundPosition: 0px -225px}

 

Ajouter un commentaire

Si vous rencontrez un problème avec votre code et que vous avez une question spécifique utilisez plutôt les questions pour avoir une réponses rapide.

Vous devez activer javascript.
 

 

Suivre les commentaires de ce tutoriel