Team-Masters.com
Que du Gratuit pour Webmasters
Construire un menu avec les CSS
Cet article posera ici les bases pour la construction d’un menu avec les CSS. Les possibilités de style étant multiples, il s’agit de livrer le mécanisme général de construction afin d’en comprendre les fondements, somme toute assez simples.
Nous n’utiliserons pas de structure compliquée pour la construction de notre menu, tels que le Javascript, les imbrications de code ou autres artifices permettant de déployer des sous-menus. Le menu, qu’il soit vertical ou horizontal, est en fait un code HTML qui fait appel à l’utilisation de listes non ordonnées, le code CSS se chargera du reste pour les questions de mise en forme.
Le code HTML de base du menu, comme on l’a dit se base sur une présentation sous forme de liste non ordonnée "ul". Le code HTML est donc le suivant :
<ul id="menu">
<li><a href="#"> Lien n°1</a></li>
<li><a href="#"> Lien n°2</a></li>
<li><a href="#"> Lien n°3</a></li>
<li><a href="#"> Lien n°4</a></li>
<li><a href="#"> Lien n°5</a></li>
</ul>le rendu de ce code sur une page web est le suivant :
Rien de bien compliqué. On pourrait se contenter de ce modèle, mais pourquoi ne pas aller plus loin ? On va, grâce aux CSS, pouvoir appliquer les styles que l’on veut à notre menu : on peut supprimer les puces, modifier l’apparence des liens, leur couleur, la police, supprimer les marges internes et externes de la balise <ul>. Le code CSS est le suivant :
ul#menu {
margin: 0;
padding: 0;
font: bold 1em Georgia, Times, serif;
list-style-type: none;
}
#menu a { /*On modifie ici l'apparence des liens*/
width: 130px;
color: green;
text-decoration: none;
background: yellow;
border: 1px solid red;
}L’affichage de notre menu devient :
Faisons le point. Notre menu prend forme mais il n’est pas encore très esthétique. Nous lui avons ajouté une largeur mais rien ne se passe ; il faut aussi l’aérer un peu. Pour cela, les liens<a> étant par définition de [type en ligne-art29], ils ne peuvent recevoir d’attributs de dimension. On va leur faire changer de statut à l’aide de la déclaration "display : block", ainsi la valeur de 130px que nous lui avons assigné va pouvoir s’appliquer car les liens seront alors considérés comme étant de type bloc. Pour aérer le menu, on va aussi appliquer la propriété "line-height" qui va permettre de donner une valeur entre les lignes. Notre code CSS devient :
#menu a { /*On modifie ici l'apparence des liens*/
display: block;
line-height: 25px;
width: 130px;
color: green;
text-decoration: none;
background: yellow;
border: 1px solid red;
margin: 5px 2;
}Le résultat est le suivant :
Voilà, le résultat est quand même mieux non ? A partir de ce schéma de construction, vous disposez des bases nécessaires pour créer des menus verticaux comme bon vous semble. Libre à vous maintenant de jouer sur les styles pour agrémenter vos menus : jouer sur les espacements, les épaisseurs et styles de bordures, le style des liens survolés et visités en utilisant les pseudo-classes comme ":hover" et ":visited"... bref, à vous d’avoir de l’imagination. Team-Masters.com vous propose aussi dans la rubrique des trucs et astuces divers styles de menus verticaux que vous pouvez utiliser ou vous inspirer. N’hésitez pas à y jeter un coup d’oeil.3 septembre 2006
Mise en page : Le positionnement flottant avec les CSS
CSS : Une mise en page sur 2 colonnes avec la propriété float
Le recouvrement de blocs
Positionner des blocs en absolu en CSS
Le positionnement relatif en CSS
Le positionnement des blocs en CSS : Le flux normal
Mise en page en CSS : les types de boîtes
CSS : Les bordures
Mise en page avec les CSS : Comprendre le modèle de boîte
Les pseudo-classes
