Comment créer : Menu en dehors du canvas

Créer un menu en dehors du canvas

Première étape - Ajouter HTML :

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">À propos</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<!-- Utilisez n'importe quel élément pour ouvrir la navigation latérale -->
<span onclick="openNav()">ouvrir</span>
<!-- Si vous souhaitez que la navigation latérale repousse le contenu de la page vers la droite, ajoutez tout le contenu de la page à l'intérieur de ce div (si vous ne souhaitez pas utiliser ce réglage pour que la navigation latérale reste en haut de la page, ne l'utilisez pas) -->
<div id="main">
  ...
</div>

Deuxième étape - Ajoutez CSS :

/* Menu de navigation latéral */
.sidenav {
  height: 100%; /* 100% de hauteur */
  width: 0; /* Largeur 0 - ce réglage est modifié par JavaScript */
  position: fixed; /* Reste en place */
  z-index: 1; /* Reste au sommet */
  top: 0;
  left: 0;
  background-color: #111; /* Noir */
  overflow-x: hidden; /* Désactive le défilement horizontal */
  padding-top: 60px; /* Contenu à 60 pixels du haut */
  transition: 0.5s; /* Effet de transition de 0.5 secondes, pour faire glisser la barre de navigation latérale */
}
/* Liens du menu de navigation */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
/* Changement de couleur lors du survol de la souris sur les liens de navigation */
.sidenav a:hover {
  color: #f1f1f1;
}
/* Position et style du bouton de fermeture (en haut à droite) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* Réglage de la mise en page du contenu de la page - Si vous souhaitez repousser le contenu de la page vers la droite lors de l'ouverture de la navigation latérale, utilisez cette option */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* Modification de la mise en page de la barre de navigation latérale sur les petits écrans où la hauteur de l'écran est inférieure à 450 pixels (réduction des marges internes et de la taille du texte) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Étape 3 - Ajout de JavaScript :

Menu en dehors du canevas

/* Réglage de la largeur de la navigation latérale à 250px, de la marge gauche du contenu de la page à 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}
/* Réglage de la largeur de la navigation latérale à 0, de la marge gauche du contenu de la page à 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

Essayer personnellement

L'exemple suivant glisse également la barre de navigation latérale et repousse le contenu de la page vers la droite. Cependant, cette fois, nous avons ajouté une couleur de fond noire semi-transparente (40% d'opacité) à l'élément body pour "mettre en valeur" la barre de navigation latérale :

Menu en dehors du canevas avec transparence

/* Réglage de la largeur de la navigation latérale à 250px, de la marge extérieure gauche du contenu de la page à 250px et ajout d'une couleur de fond noire transparente (40% d'opacité) au body */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
/* Réglage de la largeur de la navigation latérale à 0, de la marge gauche du contenu de la page à 0 et de la couleur de fond du body en blanc */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

Essayer personnellement

Pages liées

Tutoriel :Barre de navigation CSS