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 *