CSS 3 : Menu horizontal et vertical avec animations

Partager cet article

Temps estimé pour la lecture de cet article : 11 min

Bonjour à tous, aujourd’hui j’aimerais vous présenter un article sur le CSS3 et plus précisément les menus ! On va prendre deux exemples de menu classique mais efficace.

Commençons par la structure html car elle ne variera pas pour les deux exemples que l’on va prendre. Il n’y a rien de compliqué, on a une liste non ordonnée qui va contenir des liens.

<!DOCTYPE html>
<html lang="fr-FR">
	<head>
		<title>Effets Css</title>
		<link rel="stylesheet" href="css/main.css" />
		<meta charset="UTF-8">
	</head>
<body>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</body>
</html>

Menu horizontal

Nous allons donc voir notre premier exemple, un menu horizontal :

ul {
  width: 800px;
  margin: 40px auto;
  text-align: center;
  font-size: 35px;

}
ul li{
  list-style:none;
  display:inline-block;
  padding:15px;
}
a{
  color: #15F3CF;
  text-decoration:none;
  position:relative;
  padding:6px 0;
  -webkit-transition: all 0.8s;
  -o-transition: all 0.8s;
  transition: all 0.8s;
}    
a:after{
  content:'';
  width:0%;
  margin-left:50%;
  height:2px;
  bottom:0;
  left:0;
  -webkit-border-radius: 40%;
  -moz-border-radius: 40%;
  border-radius:40%;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition:all 0.5s;
  position:absolute;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition:all 0.5s;
}
a:hover:after {
  background-color: #15F3CF;
  width:60%;
  margin-left:20%;
  -moz-box-shadow: 0px 0px 10px #22A9E8;
  -webkit-box-shadow: 0px 0px 10px #22A9E8;
  -o-box-shadow: 0px 0px 10px #22A9E8;
  box-shadow:0px 0px 10px #22A9E8;
}

Voyons en détail le css :

Pour chaque li, on lui retire son aspect par défaut grâce au liste-style: none et on précise qu’ils doivent s’afficher en ligne avec le display-inline: block.
Pour chaque lien, on les positionne en position: relative afin de pouvoir ensuite tracé le trait grâce au sélecteur a:after. On donne un effet de transition pour le hover.
Sur le sélecteur a:after, on le positionne en absolute, en bas à gauche, on le déplace grâce au margin-left de 50%. Enfin, on lui associe une bordure arrondie et on lui donne encore une transition
Enfin, au hover sur le sélecteur a:after, on lui donne une taille de 60% et on lui donne une ombre grâce à la propriété box-shadow.

Menu vertical

Voyons maintenant, le cas du menu vertical :

.ul {	
	width: 350px; 
	margin: 40px auto;
  	list-style: none;
  	padding: 5px; 
  	background: #F2F2F2;  
}
.ul li, .ul li a{
	display: block;
	text-align: center;
}
.ul li a {
	margin: 1px 0; 
  	padding: 8px 20px; 
  	color: #666;  
  	background: #FFF;  
  	text-decoration: none; 
  	-webkit-transition: all .3s;  
  	-moz-transition: all .3s;   
  	transition: all .3s; 
}
.ul li a:hover, .ul li a:focus {
  	background: #22A9E8;  
  	color: #FFF;
	-ms-transform: rotate(1.1); 
        -webkit-transform: rotate(1.1);
	transform: scale(1.1);	
}

Explications :

Sur le ul, on donne un fond gris autour du menu, qu’on voit grâce au padding.
On force les li et les liens à s’afficher en display: block, afin qu’ils prennent toute la largeur disponible.
On précise que les liens ne doivent pas avoir leur comportement par défaut.
Au hover, on change le fond du li, la couleur du texte et surtout on donne un effet de zoom grâce à la propriété transform: scale(1.1).

Et voilà, rien de bien compliqué, amusez-vous bien !