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 !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.