COMMENT CRÉER UN MENU DYNAMIQUE
AVEC SEULEMENT HTML ET CSS
Nous allons voir comment créer un menu déroulant seulement avec du HTML et CSS sans JavaScript ou autre technologie supplémentaire. Nous irons progressivement depuis l’essentiels jusqu’au l’obtention d’un menu agréable et pratique.
Dispositif nécessaire : un éditeur de texte est suffisant, mais vous pourriez préférer un éditeur de code HTML et CSS avancé.
Principe :
· Le menu est inséré comme une liste html en plusieurs niveaux (nous utiliserons deux niveaux pour l’exemple);
· On ajoute les balises de liens aux éléments de la liste ;
· On masque le niveau inferieur avec le CSS
· On fait apparaitre un bloc de sous-menu au passage de la souri
· On améliore le positionnement des sous-menus
· On améliore l’apparence du menu
Inserer les elements de menu
Nous utiliserons les balises ul et li. Voici un exemple de code
<div id="menu">
<ul>
<li>apparence
<ul >
<li>templates</li>
</ul>
</li>
<li>contenu
<ul>
<li>articles</li>
<li>fichiers</li>
</ul>
</li>
<li> </a>
<ul>
<li>< systeme</li>
<li>exportation ></li>
<li> securit</li>
<li>statistiques</li>
</ul>
</li>
</ul>
</div>
Insertions des liens
<div id="menu">
<ul>
<li><a href="#">apparence</a>
<ul class="n1">
<li><a href="#">templates</a></li>
</ul>
</li>
<li><a href="#">contenu</a>
<ul class="n1">
<li><a href="#">articles</a></li>
<li><a href="#">fichiers</a></li>
</ul>
</li>
<li><a href="technique">technique</a>
<ul class="n1">
<li><a href="#">systeme</a></li>
<li><a href="#">exportation</a></li>
<li><a href="#">securite</a></li>
<li><a href="#">statistiques</a></li>
</ul>
</li>
</ul>
</div>
Le code CSS
<style type="text/css">
<!--
#menu a {
text-decoration: none;
}
#menu ul{
width:80px;
margin:0px;
padding:0;
list-style:none;
}
#menu ul ul{
display:none;
margin-left:80px;
position:absolute;
}
#menu li:hover > ul{
display:block;
}
-->
</style>
Le code HTML + CSS complet
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>menu dynamique pur html + css</title>
<style type="text/css">
<!--
#menu a {
text-decoration: none; /*enleve le soulignement des lien*/
}
#menu ul{
width:80px; /*largeur des ul*/
margin:0px; /*pas de marge*/
padding:0; /*pas d'espace a gauche*/
list-style:none; /*pas de symble de liste*/
}
#menu ul ul{
/*s'applique aux sous-menus*/
display:none; /*on cache les sous-menu*/
margin-left:80px; /*on decoule a droite de 80px*/
position:absolute; /*...les menu haut restent statiques*/
}
#menu li:hover > ul{
display:block; /*fait apparaitre les sous-menu onmouseover*/
}
-->
</style></head>
<body>
<div id="menu">
<ul>
<li><a href="#">apparence</a>
<ul class="n1">
<li><a href="#">templates</a></li>
</ul>
</li>
<li><a href="#">contenu</a>
<ul class="n1">
<li><a href="#">articles</a></li>
<li><a href="#">fichiers</a></li>
</ul>
</li>
<li><a href="technique">technique</a>
<ul class="n1">
<li><a href="technique">systeme</a></li>
<li><a href="technique">exportation</a></li>
<li><a href="technique">securite</a></li>
<li><a href="technique">statistiques</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
A faire
Voici un exemple très simple pour comprendre le principe. Il reste alors de donner une apparence convenable au menu et ses éléments.
Commentaires