Réalisation de menus en CSS
CSS offre la possibilité de créer des menus de toutes sortes. En voici quelques exemples
La technique de la "porte coulissante"
Création de l'onglet
Si vous vous intéressez à la création de listes horizontales en CSS, vous remarquerez certainement au moins deux méthodes pour ranger un groupe d'items sur une ligne. Chacun a ses avantages et inconvénients. Mais les deux font intervenir certains aspects cachés de CSS qui peuvent rapidement devenir complexes. L'une de ces méthodes repose sur les boîtes en ligne, et l'autre sur les éléments flottants.
La première méthode, certainement la plus utilisée, revient à affecter à la propriété display de chaque item de liste la valeur "inline". Ce procédé est séduisant par sa simplicité. Appliqué à la technique des portes coulissantes, il fait malheureusement apparaître quelques problèmes de rendu sous certains navigateurs. Nous allons plutôt utiliser la propriété float des items de liste pour les placer en ligne
Nous allons imbriquer une série d'éléments flottants dans un autre élément flottant servant de container. Cela permet d'encadrer complètement les items flottants, et de cette façon, de pouvoir ajouter une couleur de fond ou une image dernière nos onglets. Nous devons prendre garde à ce que l'élément qui suit nos onglets interrompe le flottement par la valeur "clear" de sa propriété float. Cela évitera ainsi aux onglets flottants d'affecter la position d'éventuels autres éléments de la page.
Commençons par le code HTML suivant :
<div id="header"> <ul> <li><a href="#">Home</a></li> <li id="current"><a href="#">News</a></li> <li><a href="#">Produits</a></li> <li><a href="#">A propos</a></li> <li><a href="#">Contact</a></li> </ul> </div>