Nous nous intéressons ici au comportement d'un menu qui s'adapte à la taille de votre écran.
Pour le HTML suivant
<article id="demoflexh">
<header role="banner">
<h1><a href="#">Cours @ </a></h1>
<nav role="navigation"><ul>
<li><a href="#">Cours</a></li>
<li><a href="#">TD</a></li>
<li><a href="#">TP</a></li>
<li><a href="#">Website</a></li>
</ul></nav>
</header>
</article>
Voici le comportement attendu.
La réalisation de ce menu repose sur l'utilisation de média capable de modifier le CSS de votre passage en fonction de la taille !
L'idée est d'écrire pour chaque média (la taille de la fenêtre) le CSS indiquant les règles de comportement.
@media (min-width: tailleDuMédia) {
règles
}
Dans cet exemple, deux tailles de média seront prises en charge.
Travail
Voici un lien pour aborder la notion de média @mediafichier solution à étudier⦽