Créer un Menu Off-Canvas en CSS

Utilisation de l'input checkbox
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre CSS 3
Revoir le teaser Je m'abonne
4,5
Transcription

89,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
4,5
89,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

L'objectif de cette vidéo est d'apprendre à :

  • Concevoir un menu off-canvas entièrement en CSS,
  • Utiliser des sélecteurs CSS pour gérer l'affichage des éléments,
  • Appliquer des styles CSS pour une meilleure expérience utilisateur.

Découvrez comment finaliser un menu off-canvas CSS sans utiliser JavaScript.

Dans cette vidéo, nous approfondirons la création d'un menu off-canvas utilisant uniquement du CSS. Nous aborderons tout le processus, de la mise en place initiale des éléments HTML à l'application des styles CSS, pour obtenir un menu qui apparaît et disparaît par-dessus le contenu existant. Les étapes incluent la configuration de la position fixe, l'alignement centralisé des éléments de navigation avec Flexbox, et l'application de transitions douces pour une meilleure expérience utilisateur. De plus, nous utiliserons des sélecteurs CSS avancés pour manipuler la visibilité du menu en réponse aux actions de l'utilisateur.

Voir plus
Questions réponses
Qu'est-ce qu'un menu off-canvas?
Un menu off-canvas est un type de menu qui apparaît depuis le côté de l'écran, recouvrant partiellement ou totalement le reste du contenu.
Quels sont les principaux avantages d'utiliser un menu off-canvas en CSS sans JavaScript?
Utiliser un menu off-canvas en CSS sans JavaScript réduit la complexité et la taille du code, améliorant ainsi les performances et la maintenabilité de la page web.
Quel est le rôle de Flexbox dans cette création de menu?
Flexbox est utilisé pour centrer les éléments de navigation à l'intérieur du menu off-canvas, offrant un alignement et une distribution spatiale efficaces.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 10 mois
La formation est divisée en 90 modules sans lien entre eux et sans progression pédagogique. Il faut les réorganiser par thème pour donner plus de cohérence et donner de la progression pédagogique à la formation. Multiples fautes d'orthographe dans les textes.
henridjithat
Il y a 1 an
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 ans
J'en suis arrivé au bout.. Un vrai marathon. Très longue formation, à mon avis c'est plutôt 30h de cours et non pas 15h.
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.
g.vanleynseele
Il y a 4 ans
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !