Créer facilement un menu horizontal avec de beaux contours CSS

A la demande populaire, voici comment créer facilement un menu horizontal :

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#menu { 
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline; /* affichage horizontal */
}
#menu li a {
padding: 5px 20px;
margin: 0;
background: #98B924;
color: #fff;
border: 1px solid #89a;
text-decoration: none;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
-webkit-border-top-left-radius: 10px; /* pour Chrome */
-webkit-border-top-right-radius: 10px; /* pour Chrome */
 
}
#menu li a:hover, #menu li a:focus { /* Au passage de la souris...
  background: #b8da40; /* ...l'arriere-plan change de couleur et... */
color: #000; /* les liens prennent la couleur noir */
}

Enregistrez tout ça avec l’extension css. Dans notre exemple le fichier s’appelera style.css. Faisons un test avec une page html toute basique :

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Menu horizontal CSS</title>
</head>
<body>
<h1>Menu sous forme d'onglets en CSS sans images</h1>
<ul id="menu">
<li><a href="#">Un</a></li>
<li><a href=""">Deux</a></li>
<li><a href="#">Trois</a></li>
<li><a href="#">Quatre</a></li>
</ul>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

Voir la demo

Laisser un commentaire