|
|
Ce code affiche un menu de couleur jaune, liens vert, le survol du lien l'affiche en orange le menu devient vert..Les propriètés border permettenr de créer l'illusion d'un relief
Exemple de menu vertical:
Codage CSS de l'exemple:
/* Menu sans puces */
ul#menu {
margin: 0;
padding: 0;
font: bold 1em Geargia, Times serif;
list-style-type: none;
}
/* Menu de couleur verte */
#menu a {
/* la propriété display:block permet de faire occuper les 120px au menu sinon celui-ci occupe juste l'espace néccessaire au texte contenu */
display: block;
margin: 5px 0;
color: green;
text-decoration: none;
/* la propriété line-height permet d'aérer le menu */
line-height: 25px;
/* ces propriétés forment le bouton */
width: 120px;
border: 1px solid black;
background: #fc0;
text-align: center;
/* ces propriétés forment le relief */
border-width: 1px 2px 1px 2px;
border-color: #cecece #4a4a4a #4a4a4a #cecece;
border-style: solid;
}
/* Menu avec survol orange et fond vert au survol */
#menu a:hover, #menu a:focus {
color: orange;
background: green;
/* ces propriétés inversées forment le relief inversé */
border-width: 2px 1px 2px 1px;
border-color: #4a4a4a #cecece #cecece #4a4a4a;
border-style: solid;
}
| Code HTML pour afficher le style CSS
<html> |
