GénéralPlan de coursConfiguration d'environnementRessourcesMédiagraphieLexiqueÉléments HTML
Leçons
Leçon 010. Plan de leçon1. Configuration de l'environnement2. Serveurs et protocoles3. MarkDown4. GitHub5. TP-0
Leçon 020. Plan de leçon1. MarkDown2. HTML53. XML4. Validation HTML5. GitHub6. TP-0
Leçon 030. Plan de leçon1. Amélioration progressive2. Entités HTML3. Emmet4. GitHub et communauté5. TP-0 remises6. TP1 - Étape 1 - HTML
Leçon 040. Plan de leçon1. TP1 – Étape 2 et+2. Charte typographique
Leçon 050. Plan de leçon1. Cascade2. Héritage et typographie3. Spécificité et modèles de boîtes4. Stratégies d'intégration5. Navigation mobile
Leçon 06Leçon 07Leçon 08Leçon 09Leçon 10Leçon 11Leçon 12Leçon 13Leçon 14Leçon 15Leçon 16Leçon 17Leçon 18Leçon 19Leçon 20Leçon 21Leçon 22Leçon 23Leçon 24Leçon 25Leçon 26Leçon 27Leçon 28Leçon 29Leçon 30
TIM CSF - Intégration 2 logo
TIM CSF - Intégration 2INTEGR-2v2026

Général

  • Plan de cours
  • Configuration d'environnement
  • Ressources
  • Médiagraphie
  • Lexique
  • Éléments HTML

Leçons

  • Leçon 01
    • 0. Plan de leçon
    • 1. Configuration de l'environnement
    • 2. Serveurs et protocoles
    • 3. MarkDown
    • 4. GitHub
    • 5. TP-0
  • Leçon 02
    • 0. Plan de leçon
    • 1. MarkDown
    • 2. HTML5
    • 3. XML
    • 4. Validation HTML
    • 5. GitHub
    • 6. TP-0
  • Leçon 03
    • 0. Plan de leçon
    • 1. Amélioration progressive
    • 2. Entités HTML
    • 3. Emmet
    • 4. GitHub et communauté
    • 5. TP-0 remises
    • 6. TP1 - Étape 1 - HTML
  • Leçon 04
    • 0. Plan de leçon
    • 1. TP1 – Étape 2 et+
    • 2. Charte typographique
  • Leçon 05
    • 0. Plan de leçon
    • 1. Cascade
    • 2. Héritage et typographie
    • 3. Spécificité et modèles de boîtes
    • 4. Stratégies d'intégration
    • 5. Navigation mobile
  • Leçon 06
  • Leçon 07
  • Leçon 08
  • Leçon 09
  • Leçon 10
  • Leçon 11
  • Leçon 12
  • Leçon 13
  • Leçon 14
  • Leçon 15
  • Leçon 16
  • Leçon 17
  • Leçon 18
  • Leçon 19
  • Leçon 20
  • Leçon 21
  • Leçon 22
  • Leçon 23
  • Leçon 24
  • Leçon 25
  • Leçon 26
  • Leçon 27
  • Leçon 28
  • Leçon 29
  • Leçon 30
Plan de cours (PDF)
Plan de cours (PDF)

5. Navigation mobile

4. Stratégies d'intégration
Leçon 06

Créer un menu mobile avec un simple basculement de classe. Même HTML pour mobile et desktop.

À venir

4. Stratégies d'intégrationLeçon 06

Sur cette page

  1. 5. Navigation mobile – même HTML, une classe pour afficher ou masquer
    1. Pourquoi faire une seule navigation ?
  2. Étape 1 – Le HTML
    1. Ce qu'il faut retenir
  3. Étape 2 – Le CSS
    1. 2.1 – Style de base (approche mobile d'abord)
    2. Ce qui se passe ici
    3. 2.2 – Grand écran : menu toujours visible, bouton caché
    4. Ce qui se passe ici
  4. Étape 3 – Le JavaScript
    1. 3.1 – Sélectionner les éléments
    2. Ce qui se passe ici
    3. 3.2 – Au clic, basculer la classe
    4. Ce qui se passe ici
  5. Récapitulatif
  6. Essayer le code