19 Déc2015
Création d'un menu horizontal simple en css
Objectif:
Créer un menu horizontal simple en html et css .
Énoncé :
On se basant sur le code html suivant :
<!doctype html> <html> <head> <title>Menu simple</title> <meta charset="utf-8"> </head> <body> <nav> <ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </body> </html>
Créer un menu horizontal avec le style ci dessous :
Menu horizontal simple
Remarquez le changement de style sur l'item About au survol de la souris.
<style type="text/css">
/* on commence par positionner le menu à droite grâce à la propriété float:right et on retire les puces par list-style:none; */
.nav{
float: right;
list-style: none;
padding: 10px;
}
/* les items li se mettent par défaut en block , on pourra les mettre en ligne soit par la propriété display:inline-block soit par flottement à gauche float:left; */
.nav li{
float: left;
margin:0 0 0 30px;
width: 100px;
border: 1px solid black;
}
/* afin de changer la largeur des liens(width=100% de son conteneur li) on doit changer leur affichage de la valeur inline vers inline-block */
.nav li>a{
font:1em helvetica arial sans-serif;
line-height: 3em; /* pour augmenter la hauteur du lien (la zone cliquable) on peux utiliser en alternatif un padding */
display: inline-block;
width: 100%;
text-align: center;
text-decoration: none; /* enlever la décoration par défaut des liens */
font-weight: bold;
}
/* change la couleur du texte et le background d'un lien au survol de la souris */
.nav a:hover{
color:#fff;
background: #3498DB;
}
</style>
