Comment créer : Navigation couvrante en plein écran

Apprendre à créer un menu de navigation couvrante en plein écran.

Créer une navigation couvrante en plein écran

Première étape - Ajouter HTML :

<!-- 覆盖层 -->
<div id="myNav" class="overlay">
  <!-- 可关闭叠加导航的按钮 -->
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <!-- Overlay content -->
  <div class="overlay-content">
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </div>
</div>
/* Utilisez n'importe quel élément pour ouvrir / afficher le menu de navigation superposé */
<span onclick="openNav()">ouvrir</span>

Deuxième étape - Ajouter CSS :

/* Couverture (arrière-plan) */
.overlay {
  /* La hauteur et la largeur dépendent de la manière dont vous souhaitez afficher la couche de couverture (voir le JS ci-dessous) */   
  height: 100%;
  width: 0;
  position: fixed; /* Reste en place */
  z-index: 1; /* Reste en haut */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Noir de secours */
  background-color: rgba(0,0,0, 0.9); /* Noir semi-transparent */
  overflow-x: hidden; /* Désactive le défilement horizontal */
  transition: 0.5s; /* Effet de transition de 0.5 secondes pour faire glisser la couche vers le haut ou vers le bas (hauteur ou largeur selon la manière de visualisation) */
}
/* Placer le contenu à l'intérieur de la couche de couverture */
.overlay-content {
  position: relative;
  top: 25%; /* 25% du haut */
  width: 100%; /* Largeur de 100% */
  text-align: center; /* Centrer le texte / les liens */
  margin-top: 30px; /* Marge externe supérieure de 30 pixels pour éviter de heurter le bouton de fermeture sur les écrans petits */
}
/* Couverture des liens de navigation à l'intérieur de la couche */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; /* Affiche en bloc plutôt qu'en ligne */
  transition: 0.3s; /* Effet de transition au survol de la souris (couleur) */
}
/* Change la couleur lorsque le curseur est sur le lien de navigation */
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}
/* Placer le bouton de fermeture (en haut à droite) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}
Changer la taille de la police des liens et redéplacer le bouton de fermeture lorsque la hauteur de l'écran est inférieure à 450 pixels, pour éviter qu'ils ne se chevauchent
/* Changer la taille de la police des liens et redéplacer le bouton de fermeture lorsque la hauteur de l'écran est inférieure à 450 pixels, pour éviter qu'ils ne se chevauchent */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

Étape 3 - Ajouter du JavaScript :

Dans l'exemple suivant, le menu de navigation en couche glisse de gauche à droite (de 0 à 100% de largeur) lors de l'activation :

Glisser du côté

/* Ouvrir lorsque quelqu'un clique sur l'élément span */
function openNav() {
  document.getElementById("myNav").style.width = "100%";
}
/* Fermer lorsque quelqu'un clique sur le symbole "x" dans la superposition */
function closeNav() {
  document.getElementById("myNav").style.width = "0%";
}

Essayer par vous-même

Dans l'exemple suivant, le menu de navigation en couche glisse du haut vers le bas (de 0 à 100% de hauteur).

Attention :Dans cet exemple, notez que les CSS sont légèrement différents de ceux de l'exemple précédent (la hauteur par défaut est maintenant 0, la largeur est 100%, et overflow-y est hidden (désactive le défilement vertical, sauf pour les petits écrans)) :

Glisser du haut vers le bas

/* Ouvrir */
function openNav() {
  document.getElementById("myNav").style.height = "100%";
}
/* Fermer */
function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}

Essayer par vous-même

Dans cet exemple, le menu de navigation n'utilise pas d'animation lors de son ouverture :

Ouvrir le menu sans animation

/* Ouvrir */
function openNav() {
  document.getElementById("myNav").style.display = "block";
}
/* Fermer */
function closeNav() {
  document.getElementById("myNav").style.display = "none";
}

Essayer par vous-même

Pages associées

Tutoriel :Barre de navigation CSS