Quelques outils évoluésCertains outils récents permettent de mettre en page plus facilement les documents html, en voici une liste non-exhaustive

Présentation du TD

L'objectif du TD est de réaliser une page html présetant un menu déroulant correctement organisé.

Ce TD va permettre de voir les notions suivantes :

  • Organisation d'une page html
  • Utilisation des balises html5
  • Organisation de la page en vue de l'application des CSS
  • Utilisation d'une bibliothèque d'icones
  • Notions de javascript
  • Animations CSS

Le résultat attendu est le suivant :

Organisation de la page html

La première étape consiste à organiser les différentes informations en une page html, les informations sont simples

  • Le titre de la page : Application exemple
  • Un menu organisé de la manière suivante :
    • Un menu accueil
    • Un menu Catégories ayant trois sous-menu :
      • HTML / CSS
      • JavaScript
      • PHP / MySQL
    • Un menu paramètres
Positionnement des parties

L'objectif de cette partie est de définir deux parties :

  • Une partie gauche de largeur fixe contenant la barre de navigation
  • Une partie droite contenant la zone de travail avec le titre de la page
Disposition du menu

L'objectif de cette partie est de réaliser une première mise en forme du menu pour le présenter de la manière suivante :

Attendu
Améliorations esthétiques

L'objectif de cette partie est d'insérer des icones et de mettre en forme le site de manière plus poussée

  • Utiliser les icones FontAwersome
  • Mettre en place une police google
Attendu
Menu déroulant

L'objectif de cette partie est de mettre en place le mécanisme permettant d'afficher et de cacher le sous menu

Le script suivant permet d'ajouter la classe afficherMenu aux balises li au dessus des .menu_deroulant cliqués

let m=document.querySelectorAll(".menu_deroulant");
for (var i = 0; i < m.length; i++) {
	m[i].onclick = function(event) {
		event.srcElement.parentElement.parentElement.classList.toggle("afficherMenu");
	};
}
Concrètement, la classe est ajoutée de cette manière :
<li class="afficherMenu">					
	<a class="menu_deroulant" href="#">
		<i class="far fa-list-alt"></i>
		<span class="libelle_lien">Catégories</span>
	</a>
	<ul class="sous_menu">
		<li><a href="#">HTML & CSS</a></li>
		<li><a href="#">JavaScript</a></li>
		<li><a href="#">PHP & MySQL</a></li>
	</ul>
</li>
Afficher cacher la sidebar

L'objectif de cette partie est de mettre en place le mécanisme permettant d'afficher et de cacher la sidebar

Le script suivant permet d'ajouter la classe fermer à la balise nav lors du clic sur le burger-button

let sidebar = document.querySelector(".sidebar");
let sidebarBtn = document.querySelector(".fa-bars");
sidebarBtn.addEventListener("click", ()=>{
  sidebar.classList.toggle("fermer");
});
Concrètement, la classe est ajoutée de cette manière :
<body>
		<nav class="sidebar fermer">
Attendu
Ajout des animations

L'objectif de cette partie est d'ajouter des animations css lors des transitions

Gestion de l'accessibilité

L'objectif de cette partie est de rendre accessible le menu, plusieurs problèmes rencontrés :

  • La navigation au clavier se fait mal
  • L'affichage du sous menu ne se fait qu'avec la souris

Nous allons utiliser le site Accede-web