TD5
Introduction
La création d'un menu en CSS est un exercice classique. Deux types de menus sont généralement utilisés dans une page (voir ex du W3C) :
menu horizontal
menu vertical
Références
Je vous propose de découvrir un site consacré à se sujet. Cette lecture pourrait se poursuivre avec la découverte des menus dynamiques écrits en langage Javascript.
Modifier la page pour avoir un menu sans utiliser des ULs
Une idée de réponse est donnée ici
Étude de CSS
Avant de répondre à la question suivante, on relira le chapitre sur la visibilité des éléments.
Donner une représentation de la feuille de style suivante.
ul.navbar {
float:none;
list-style-type:none;
margin:0;
padding:0;
top:2em;
}
#content {
margin-left:10em;
}
ul.navbar li {
display:inline;
}
ul.navbar a {
margin:5px;
padding:5px;
text-decoration:underline;
}
Finalement, on comparera cette solution avec l'exemple du W3C School.
Étude de menu dynamique en pur css.
L'utilisation de menus dynamiques est très classique dans une page web.
Le dynamisme est développer soit en Javascript soit en pur CSS (la suite de ce TD est consacré à cette étude).
En particulier, on étudiera les exemples de menus dynamiques.
Etudier la magie du CSS pour le menu dynamique