Il nous arrive de temps en temps de devoir demander à notre visiteur sur quelle page il veut aller, en lui affichant les principales sections de notre site internet. Ce menu n'est pas souvent très agréable à utiliser, découvrons ensemble dans cet article comment faire pour le rendre beaucoup plus moderne avec de belles animations qui donneront à vos passants l'envie de visiter votre site !
1ère étape
Débutons avec le code HTML.
<ul>
<li><a href="#" data-text="Accueil">Accueil</a></li>
<li><a href="#" data-text="A propos">A propos</a></li>
<li><a href="#" data-text="Services">Services</a></li>
<li><a href="#" data-text="Contact">Contact</a></li>
</ul>Rien de bien compliqué ici : nous avons juste besoin d’une liste à puces.
Notez que nous utilisons un attribut data-text, c’est original mais vous allez rapidement comprendre pour quelle raison !
2ème étape
Stylisons la balise body.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #111;
height: 100vh;
}
3ème étape
Stylisons maintenant notre liste à puces pour la rendre plus sympa.
ul {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
list-style-type: none;
}Ici, nous centrons notre menu au centre de la page : verticalement et horizontalement, grâce à Flexbox.
4ème étape
Travaillons sur les liens.
a {
text-transform: uppercase;
font-size: 3em;
color: white;
text-decoration: none;
font-family: sans-serif;
display: inline-block;
margin: 25px 0;
}
5ème étape
Créons maintenant l'élément before.
a::before {
content: attr(data-text);
text-align: center; line-height: 100vh;
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
z-index: -1; transform: scale(0);
font-size: 10rem;
transition: all 0.3s;
color: rgba(0, 0, 0, 0.1);
}Dans l’étape précedente, nous créons le fond qui est affiché lorsque nous sélectionnons un lien de notre menu.
Lorsque nous utilisons la propriété content, nous écrivons cette fois-ci attr(data-text).
Cette valeur nous permet de reprendre le texte entré à l’intérieur de l’attribut data-text de la balise <a> automatiquement.
6ème étape
Détectons le survol du lien.
li:hover a::before{
transform: scale(1);
}
li:nth-child(1) a::before{
background-color: #da4747;
}
li:nth-child(2) a::before{
background-color: #303960;
}
li:nth-child(3) a::before{
background-color: #dd7631;
}
li:nth-child(4) a::before{
background-color: #95389e;
}Le sélecteur nth-child est une pseudo-classe désigné par la syntaxe :nth-child(n) qui permet de cibler chaque élément qui est le n-ième enfant de son parent.