Bundle : Intégrer un menu avec jQuery en 3 exercices pratiques
ERROR
00:00
00:00

TUTO Bundle : Intégrer un menu avec jQuery en 3 exercices pratiques

Adrien Gazaix
Promo -29%
10,00€14,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce bundle vidéo jQuery de près de 2h30, nous apprendrons ensemble comment intégrer un
menu
sur votre site web à travers 3 exercices pratiques.

La raison pour laquelle un internaute visite votre site c’est qu’il cherche quelque chose en particulier et il
veut le trouver rapidement. C’est pourquoi le menu constitue un élément essentiel dans un site
internet puisqu’il permet de créer des liens entre les différentes pages et ainsi créer une navigation la
plus intuitive possible
.

Il y a plusieurs façons de conceptualiser un menu. Il peut être visible entièrement ou caché en
partie sur la version responsive mais aussi collé en haut de la page pour laisser la possibilité de
naviguer dans le site peu importe où l’on se trouve.

Dans les 3 exercices de ce bundle jQuery, nous verrons comment :

  • Créer un sticky menu : il sera toujours visible sur la page même lors du scroll
  • Créer un menu en surimpression : la navigation sera visible par dessus le site après un click sur un bouton “menu”
  • Créer un menu mobile responsive : le menu passera en version mobile après une certaine taille d’écran et s’ouvrira en déroulé après un clic sur un bouton “burger”

Je vous invite à regarder l’extrait vidéo pour découvrir plus en détails ce que nous allons faire ensemble dans cette formation.

Des bases HTML/CSS peuvent être nécessaires pour suivre les tuto plus facilement mais le tout reste
accessible aux débutants.

Après cette formation vous serez autonome pour intégrer un menu sur votre site web bureau & mobile.

Vous trouverez les fichier complets de tous les exercices dans les sources.
Je reste bien évidemment disponible dans le salon d’entraide si vous avez des questions pendant ou
après le visionnage du tuto.

Cours dans ce bundle

Créer un Sticky menu qui reste visible à tout instant Cours 1

Créer un Sticky menu qui reste visible à tout instant

Créer un menu en surimpression Cours 2

Créer un menu en surimpression

Créer un menu mobile responsive Cours 3

Créer un menu mobile responsive

Plan détaillé des cours

 
Leçon 1Créer un sticky menu
47m39s
 
Leçon 1Créer le bouton Menu en haut à droite du site
09m38s
Leçon 2Créer le menu en surimpression
16m
Leçon 3Montrer/cacher le menu en jQuery
11m36s
 
Leçon 1Introduction
02m40s
Leçon 2Rendre le container du site responsive
05m20s
Leçon 3Créer & styliser le menu responsive
12m
Leçon 4Bouton pour ouvrir le menu, icônes vectorielles & adaptation du menu pour les écrans larges
17m23s
Leçon 5Partie javascript pour créer des actions sur le bouton ainsi que des animations
12m32s

Avis des apprenants

Détail des avis
84
Apprenants
3
Commentaires
5/5
Note moyenne
5/5
3
4/5
0
3/5
0
2/5
0
1/5
0
Valérie Arno
Valérie Arno
Publié le 07/10/2018
Bonjour et merci pour ce tuto. Toujours agréable à suivre avec vous. On apprend beaucoup et sans stress et toujours de la nouveauté :-) Pas encore très à l'aise avec jQuery mais je me familiarise peu à peu. Pas de problème avec HTML et CSS même si je découvre toujours de nouvelles facettes intéressantes. On avance...
Didier Collé
Didier Collé
Publié le 01/08/2018
5/5 Cela faisait très longtemps que je ne m'étais plus intéressé au CSS, car je suis très curieux de langages informatiques, et je ne sais ou donné de la tête, ce retour aux sources est une fontaine de jouvence. vous m'avez donné le gout de m'y re-baigner. bonne continuation Didier C
Jean-Pierre Lannak
Jean-Pierre Lannak
Publié le 15/03/2017
5/5 Merci pour cette manière de coder pour créé un menu responsive. J'ai bien apprécié la function resize pour récupérer la bar nav sur tablette et écran, même si comme vous le dite on ne peut pas avoir les deux affichages en même temps (SmartPhone et ou Screen). Donc grand merci, je vous suis depuis quelques années, surtout pous vos jQuery. Toujours auusi précis, toujours aussi bon, vos tuto sont un vrai bonheur ...JP71
Adrien Gazaix
Adrien Gazaix
Hello ! Oui je sais que vous me suivez depuis un moment et vous prenez toujours le temps de m'écrire un commentaire, je vous en remercie ;) c'est vraiment encourageant pour faire toujours de nouveaux tuto. A bientôt pour le prochain tuto jquery et merci !

Vos questions sur le cours

Avec quelles versions de logiciels ce tuto est-il compatible ?

jQuery , CSS 3

Quel est le niveau requis pour suivre ce tuto ?

débutant

Attendez ! 🤗

Accédez à plus de 1351 tutos gratuits

Notre politique de protection des données