Un mini-menu pour scroller dans vos pages avec jQuery
ERROR
00:00
00:00

TUTO Un mini-menu pour scroller dans vos pages avec jQuery

Graphoeil
8,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Introduction
Leçon 2
Préparer la page HTML
Leçon 3
Les styles CSS de la page
Leçon 4
Modernizr et les styles CSS
Leçon 5
Créer le mini-menu jQuery et écouter les clicks
Leçon 6
Écouter le scroll et interagir avec le mini-menu
Leçon 7
Les événements resize et orientationchange

Plan détaillé du cours

Leçon 1Introduction
01m07s
Leçon 2Préparer la page HTML
08m23s
Leçon 3Les styles CSS de la page
08m05s
Leçon 4Modernizr et les styles CSS
06m39s
Leçon 5Créer le mini-menu jQuery et écouter les clicks
12m09s
Leçon 6Écouter le scroll et interagir avec le mini-menu
18m03s
Leçon 7Les événements resize et orientationchange
03m56s

Vos questions sur le cours

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

Attendez ! 🤗

Accédez à plus de 1330 tutos gratuits

Notre politique de protection des données