Dans ce tuto Jquery en vidéo, nous allons voir ensemble comment créer un menu accordéon qui peut servir dans le cadre d'une FAQ par exemple ou simplement pour scinder une page qui serait un peu trop longue. Le tout restera accessible à l'utilisateur même si Javascript est désactivé sur son navigateur.

Nous verrons tout d'abord comment créer cette structure HTML, et nous écrirons ensemble, pas à pas, le script jquery pour créer cet accordéon. Nous ajouterons ensuite 2 boutons pour permettre à un utilisateur d'ouvrir et de fermer tous les titres de l'accordéon en un click. Et enfin nous ajouterons un curseur personnalisé à l'aide de 3 images pour simuler les positions différentes de la souris.

Tout est fourni dans les sources pour que vous puissiez le refaire et l'intégrer à votre site.

Bon tuto.

Jetez un oeil à ces autres tuto jQuery 1.7

Créer un Sticky menu qui reste visible à tout instantCréer un Sticky menu qui…
Dans ce tuto vidéo CSS3 et Jquery, en vidéo, nous allons voir…

Animer la hauteur d'un élément pour dévoiler un contenuAnimer la hauteur d'un élément…
Dans ce tuto jQuery en vidéo, nous allons voir comment animer…

Mettre en place un panneau coulissant sur votre site webMettre en place un panneau…
Dans ce tuto Jquery gratuit en vidéo, nous allons voir ensemble…

Mettre un background vidéo en full pageMettre un background vidéo…
Dans ce tuto Jquery en vidéo, nous allons voir comment ajouter…

Créer un site web avec un slider d'images en full pageCréer un site web avec un…
Dans ce tuto jQuery / CSS3, nous allons ensemble, pas à pas,…

Créer un slider et l'intégrer à votre blog WordpressCréer un slider et l'intégrer…
A l'aide d'un plugin jQuery, nous allons créer un slider pour…

Créer une lightbox simplementCréer une lightbox simplement…
Dans ce tuto Jquery en vidéo, nous verrons comment créer une…

Créer un scroll horizontal animé pour votre site webCréer un scroll horizontal…
Dans ce tuto Jquery, en vidéo, nous allons voir ensemble comment…

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto jQuery 1.7 de 39 minutes est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

spykrew07 , Formateur

Salut, moi c’est Adrien, j’ai 27 ans et je suis Graphiste / Webdesigner depuis 5 ans maintenant. Ancien élève de l'ESMA à Montpellier, j’ai travaillé en agence de communication pendant 3 ans et depuis peu je me suis lancé en freelance. Je souhaite partager mes connaissances avec vous membres de tuto.com et j’essaierai d’être le plus didactique possible dans mes tutoriaux. Ma devise : Webdesign is not a job, it’s a passion !

En savoir plus sur spykrew07


Témoignage des clients de spykrew07

Je viens d'acheter plusieurs de ses tutos et je trouve que Spykrew07 est un excellent formateur. je recommande ses formations!

Des tuto sympa mais parfois un peu chers.

Très bon formateur, j'ai acheté beaucoup de ses tuto, le timbre de voix passe bien en continu, et bon ritme d'apprentissage. Je recommande.

Les tutos wordpress de ce formateur sont tout simplement INDISPENSABLES

je n'ai pas encore terminé les tutos, mais pour une bille comme moi, je comprends tout. Un grand merci

Lire les autres témoignages

 

D'autres tuto de spykrew07

Créer une InfoBox scrollableCréer une InfoBox scrollable
Dans ce tuto Jquery en vidéo, nous allons voir ensemble comment créer une InfoBox pour…

Créer un filtre pour trier des projets dans votre portfolioCréer un filtre pour trier des projets dans votre portfolio
Dans ce tuto Jquery en vidéo, nous verrons comment créer un système de filtres pour…

Apprenez les Bases de la 3D sur IllustratorApprenez les Bases de la 3D sur Illustrator
Dans ce tuto Illustrator en vidéo, nous allons voir ensemble comment créer à partir…

Créer une lightbox simplementCréer une lightbox simplement
Dans ce tuto Jquery en vidéo, nous verrons comment créer une lightbox pour vos images.…

voir tous les tuto de spykrew07

Notes attribuées par les utilisateurs (4 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (4)

par tailivanà voté :
(a acheté ce tuto - 13 mars 2012)

" Original et tjs aussi pédagogique, on ne se lasse pas des tutos de Spykrew
José "

par foggà voté :
(a acheté ce tuto - 21 février 2012)

" Je ne me lasse pas de tes tuto, ils sont très bien expliqués, clairs, tu es vraiment calme lors de tes explications, qui sont du coup très faciles a comprendre ! merci encore pour tes tuto, qui en tant que débutant, m'ont beaucoup appris !!! "

par chouchou59à voté :
(a acheté ce tuto - 12 février 2012)

" Toujours aussi agréable à suivre. Si je ne me suis pas trompé, je pense qu'il y a un comportement à corriger sur les dt. Lorsque l'on clique sur le bouton "tout afficher" et que l'on clique sur un titre, les trois gardent la classe current. Il s'agit certainement d'une erreur de ma part, pourriez-vous vérifier?
Cordialement "

par lottavianià voté :
(a acheté ce tuto - 23 janvier 2012)

" Comme d'hab, tuto toujours aussi agréable à suivre et vraiment très pro. C'est un plaisir de travailler en ta compagnie!
vivement les prochains...
"

 

Donnez votre avis ou posez une question au formateur.

Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous

Ce tuto en résumé ...

Ce tuto jQuery 1.7 d’une durée de 39 minutes a été acheté 55 fois et a reçu une note moyenne de 5/5.

Ce tuto a été publié le 12 décembre 2011 par spykrew07, contributeur, ayant reçu une note moyenne de 4,7/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto jQuery Menu.

Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.

Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.

Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.

N'hésitez pas à nous contacter si vous avez la moindre question !