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.
Tuto composant ce bundle :
Créer un Sticky menu qui reste visible à tout instant (voir la fiche produit)
- Créer un sticky menu 00:47:39
Créer un menu en surimpression (voir la fiche produit)
- Créer le bouton Menu en haut à droite du site 00:09:38
- Créer le menu en surimpression 00:16:00
- Montrer/cacher le menu en jQuery 00:11:36
Créer un menu mobile responsive (voir la fiche produit)
- Introduction gratuit00:02:40
- Rendre le container du site responsive 00:05:20
- Créer & styliser le menu responsive 00:12:00
- Bouton pour ouvrir le menu, icônes vectorielles & adaptation du menu pour les écrans larges 00:17:23
- Partie javascript pour créer des actions sur le bouton ainsi que des animations 00:12:32
Formateur : Adrien Gazaix
-
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...
-
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
-
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
-
Avec quelles versions de logiciels ce tuto est-il compatible ?jQuery , CSS 3
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés