Créer un menu qui s'étend sur toute la page avec CSS

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 !

Louis-Nicolas Leuillet

Mis à jour le 3 décembre 2024

Créer un menu qui s'étend sur toute la page avec CSS

1ère étape

Débutons avec le code HTML.

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.

CSS

* {
    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.

CSS

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.

CSS

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.

CSS

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.

CSS

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.

Catégorie : Développement