Envie de savoir comment créer un mini menu, tout le temps affiché à l'écran et qui vous permet de scroller dans une page (pour un site de type OnePage par exemple)? Alors suivez ce tuto en vidéo.
Au programme de ce tuto menu pour scroller dans une page avec jQuery
Voici les notions abordées dans ce cours jQuery :
- Nous verrons comment créer un mini menu
- Nous verrons comment le positionner en permanence sur la page
- Nous verrons comment faire en sorte de faire scroller la page, lorsqu'on cliquera sur ce menu
- Nous verrons comment faire en sorte de faire réagir les différentes partie du menu en utilisant le scroll par défaut du navigateur
- Nous découvrirons la bibliothèque Modernizr qui permettra, en autre, de détecter si l'utilisateur peut utiliser ou non le menu sur une interface tactile (sur smartphone et tablette par exemple)
La technique décrite dans ce tuto peut également très bien convenir pour animer un menu dans le cadre d'un site one-page.
Les fichiers sources de ce tuto sont fournis. Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions ou remarques.
Table des matières de cette formation jQuery (durée : 58m22s)
-
- Introduction gratuit 00:01:07
- Préparer la page HTML 00:08:23
- Les styles CSS de la page 00:08:05
- Modernizr et les styles CSS 00:06:39
- Créer le mini-menu jQuery et écouter les clicks 00:12:09
- Écouter le scroll et interagir avec le mini-menu 00:18:03
- Les événements resize et orientationchange 00:03:56
- Fichiers sourcestélécharger
- Certificat
Formateur : Graphoeil
Avis des clients
Questions sur le tuto
-
Avec quelle version de logiciel ce tuto est-il compatible ?jQuery 1.9, jQuery 1.8, jQuery 2.0, jQuery
-
Quel est le niveau requis pour suivre ce tuto ?intermédiaire
