Créer un menu plein écran au clic

Avoir un menu, c'est devenu un grand classique indispensable. Mais avoir un menu qui prend tout l'écran, c'est idéal lorsqu'on veut que son site soit totalement responsive (et donc adapté aux appareils mobiles par exemple). Cet article va vous aider à mettre en place un menu plein écran qui se déclenche au clic !

Vous pouvez retrouver l'ensemble de ce tutoriel sur notre compte Instagram

1ère étape

Pour commencer nous devons créer la structure de notre site : on passe donc au HTML.

<nav>
  <div class="backdrop"></div>
  <ul>
    <li><a href="#">Accueil</li>
    <li><a href="#">Blog</li>
    <li><a href="#">Projets</li>
    <li><a href="#">Contact</li>
  </ul>
</nav>

<button>
  Menu
</button>

Il n'y a rien de très compliqué aussi, notez surtout qu'on utilise une classe backdrop qui va nous permettre de créer une ombre qui va venir se déclencher et recouvrir l'ensemble de la page au clic du bouton.

2ème étape

Passons maintenant au style de notre bouton, on va lui donner un look moderne :

button {
  background: #ff9234;
  color: white;
  border: 0;
  padding: .5em 1em;
  font-size: 1.5em;
  border-radius: 1em;
  outline: 0;
  cursor: pointer;
  transition: all .1s;
}
button:hover {
  background: #35d0ba;
}

3ème étape

On passe maintenant au style du menu une fois déployé :

nav {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: none;
}

ul {
  list-style: none; padding: 0; z-index: 2;
}

ul li {
  text-align: center;
  animation: .3s print;
}

li a {
  text-decoration: none; font-size: 3em;
  text-transform: uppercase;
  font-weight: bold; font-family: arial;
  color: white;
}

ul li a:hover { color: #ff9234; }

.open {
  display: flex;
  justify-content: center;
  align-items: center;
}

Un peu plus long, mais toujours aussi simple. On créera une animation plus tard, c'est pour ça que nous appellons une animation dans la balise li qui s'appelle print.

On peut également noter qu'il y a une classe open qui ne sert à rien pour le moment. Cette classe sera ajoutée grâce à JavaScript pour ouvrir notre menu. On utilise d'ailleurs flexbox pour centrer horizontalement et verticalement tous les liens du menu.

4ème étape

Passons maintenant à notre classe backdrop et donc à notre ombre ! Ici rien de très nouveau, nous allons mettre la classe en position absolute en lui donnant "top", "left", "right" et "bottom" à 0 pour lui faire prendre toute la page. On utilisera d'ailleurs également une animation pour faire apparaître l'ombre, qu'on appellera fade.

.backdrop {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, .9);
  cursor: pointer;
  animation: fade .1s;
}

5ème étape

Nous avons notre design qui est terminé, il nous suffit maintenant de créer les animations pour afficher notre beau menu avec une classe ultime.

@keyframes print {
  from {
    margin-top: -50px; opacity: 0;
  }
  to {
    margin-top: 0; opacity: 1;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

6ème étape

Il ne reste maintenant plus qu'à faire fonctionner le tout en utilisant JavaScript.

const button = document.querySelector('button');
const nav = document.querySelector('nav');
const backdrop = document.querySelector('.backdrop');

button.addEventListener('click', () => {
  nav.classList.add('open');
});

backdrop.addEventListener('click', () => {
  nav.classList.remove('open');
});

Lorsque le bouton "Menu" est cliqué, on ajoute la classe open à notre barre de navigation ce qui va le faire apparaître.

Si l'utilisateur clique dans l'ombre (backdrop), on retire la classe open et on cache la barre de navigation.