Objectif Frontend : Comment créer facilement une Sidebar ?
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
32m20
de formation
4
leçons vidéo
1
chapitre
Débutant
niveau requis
Carl Brison
Carl Brison
Formateur certifié

Objectif Frontend : Comment créer facilement une Sidebar ?

4.7/5 Trustpilot (1395 avis) Satisfait ou remboursé
32m20
de formation
4
leçons vidéo
1
chapitre

Dans ce cours en ligne, je vous propose d'apprendre comment créer une sidebar sans langage de programmation, et uniquement du langage CSS !

Cette sidebar nous permettra de gagner de la place sur la largeur de l'écran, en affichant par défaut que des pictogrammes.
C'est en passant le pointeur de la souris sur la sidebar que nous verrons alors apparaître les liens de notre menu de navigation.
Ce type de menu en sidebar est beaucoup utilisé dans les interfaces d'administration. De plus, cela permet de donner un effet moderne et agréable en terme ergonomique. Vous pourrez ainsi proposer ce type de navigation moderne à vos clients ou bien l'appliquer à vos propres développements.

Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.

Je fournis les codes de ce tuto CSS avec le tuto.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Mise en place du code HTML
Leçon 2
Mise en forme de la Sidebar avec le CSS
Leçon 3
Fonctionnement de la Sidebar
Leçon 4
Ajouter une zone article à côté de la Sidebar

Table des matières

Leçon 1

Mise en place du code HTML

09m03
Leçon 2

Mise en forme de la Sidebar avec le CSS

11m25
Leçon 3

Fonctionnement de la Sidebar

05m47
Leçon 4

Ajouter une zone article à côté de la Sidebar

06m05

Aperçus

Avis des apprenants

Détail des avis
8
Commentaires
4,9/5
Note moyenne
5/5
7
4/5
1
3/5
0
2/5
0
1/5
0
Alain Tardif
Alain Tardif
Publié le 03/03/2025
Merci Carl pour ce cours sur la sidebar en CSS. L’usage de overflow: hidden et width dynamique permet un affichage fluide, optimisé par transition sur nav:hover. L’intégration d’icônes via FontAwesome améliore l’ergonomie. Cette approche sans JavaScript réduit la complexité tout en offrant une navigation efficace, idéale pour les interfaces administratives. Validé 100%.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil, Alain ;-)
Joel Valentin
Joel Valentin
Publié le 31/01/2023
Excellent tuto, une très bonne application du HTML et CSS. Toujours ravi de suivre tes tutos Carl. Toujours claire et précis dans tes explications. Bonne continuation et à un prochain tuto!
Carl Brison
Carl Brison
Merci beaucoup pour ton commentaire super gentil ;-)
Valérie Arno
Valérie Arno
Publié le 05/06/2022
Très bien ce tuto. Mon point faible : le overflow:hidden et le z-index. Je n'y pense jamais et surtout comment ou quand les utiliser. Deux propriétés pourtant formidables :-) Cela fait une page avec une belle sidebar complètement responsive sans utiliser les media queries. Merci et à bientôt Carl ;-)
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil, Valérie ;-)

Vos questions sur le cours

Que contient le fichier source ?

Le code complet de ce tutoriel

Quel est le niveau requis pour suivre ce tuto ?

débutant

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
8,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
32m20 de vidéo • 1 chapitre
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ 27,91€ /mois
Le 1er mois, puis 34,90€ - sans engagement
Cette formation + 6 788 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Profiter de l'offre
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.7/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1426 tutos gratuits

Notre politique de protection des données