HTML/CSS: Barre de navigation.

Barre de navigation ‘position relative’

La barre de navigation disparait lors du scroll.

HTML : Dans une balise <header></header>

<!---------------------------- HEADER------------------------------- -->
        <!-- -------------------BARRE DE NAVIGATION -------------------------->
        <header class="header">  
          <nav class="headernav">
              <a href="./index.html" class="logo">
                  <img src="./Images/logo/logo-black.png" alt="Logo Gothic">
              </a>
              <ul>
                  <input type="checkbox" id="checkbox_toggle">
                  <label for="checkbox_toggle" class="hamburger">&#9776;</label>
                  <div class="menu">
                      <li><a href="./index.html">Accueil</a></li>
                      <li><a href="./formulaire.html">Contact</a></li>
    
              </ul>
          </nav>
    
      </header>

( ceci correspond au burger menu:

<input type="checkbox" id="checkbox_toggle">
                  <label for="checkbox_toggle" class="hamburger">&#9776;</label>

&#9776 -> caractère spécial correspondant à l’icone ‘burger menu’)

Dans le CSS:

@media screen and (max-width: 520px) {
  .headernav ul .menu {
    display: none;
    transition: all 0.4s ease;
    position: absolute;
    right: 0;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    text-align: end;
    padding: 16px 0;
    background-color: rgba(51, 51, 51, 0.5);
  }
  .headernav ul .menu li:hover {
    background: none;
    border-radius: 0;
  }

  .headernav ul .menu li + li {
    margin-top: 12px;
  }

  .headernav input[type="checkbox"]:checked ~ .menu {
    /*si la checkbox est checkée*/
    display: block;
  }
  .headernav .hamburger {
    display: block;
    margin-right: 10px;
    border: 1px solid #fafafa;
    border-radius: 10px;
    padding: 5px 8px;
  }
}

Barre de navigation ‘position absolue’

La barre de navigation reste à l’endroit indiqué lors du scroll.

HTML : Dans une balise <header></header>

<!-- -------------------BARRE DE NAVIGATION -------------------------->
<header>
      <div class="en-tete">
        <nav class="headernav">
          <a href="./index.html" class="logo">
            <img src="./Images/logo/logo-black.png" alt="Logo Gothic" />
          </a>
          <ul>
            <input type="checkbox" id="checkbox_toggle" />
            <label for="checkbox_toggle" class="hamburger">&#9776;</label>
            <div class="menu">
              <li><a href="./index.html">Accueil</a></li>
              <li><a href="./formulaire.html">Contact</a></li>
            </div>
          </ul>
        </nav>
      </div>
    </header>

Dans le CSS: la div où est l’en-tête en déclarée en position absolue :

* ------------Barre de Navigation -----------*/

.en-tete {
  display: flex;
  width: 100%;
  /* background-color: rgba(255, 255, 255, 0.2); */
  background: linear-gradient(rgba(2, 33, 46, 0.5), rgba(255, 255, 255, 0));
  position: fixed; /*pour garder la barre de navigation fixe*/
  z-index: 999;
}
.headernav .logo {
  width: 150px;
  padding-left: 10px;
}

.headernav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.headernav ul .menu {
  list-style-type: none;
  display: flex;
}
.headernav ul .menu li {
  padding: 10px;
}
/* changement d'apparence si hover: */
.headernav ul .menu li:hover {
  background: linear-gradient(rgba(250, 250, 250, 0.3), rgba(0, 0, 0, 0.1));
  border-radius: 10px;
}
/* Enlever le soulignement et la couleur bleue du lien: */
.headernav ul li a {
  text-decoration: none;
  color: inherit;
}

.headernav input[type="checkbox"] {
  display: none;
}

.headernav .hamburger {
  display: none;
  font-size: 24px;
  user-select: none; /*empeche l'element d'etre selectionnable */
}

@media screen and (max-width: 520px) {
  .headernav ul .menu {
    display: none;
    transition: all 0.4s ease;
    position: absolute;
    right: 0;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    text-align: end;
    padding: 16px 0;
    background-color: rgba(51, 51, 51, 0.5);
  }
  .headernav ul .menu li:hover {
    background: none;
    border-radius: 0;
  }

  .headernav ul .menu li + li {
    margin-top: 12px;
  }

  .headernav input[type="checkbox"]:checked ~ .menu {
    /*si la checkbox est checkée*/
    display: block;
  }
  .headernav .hamburger {
    display: block;
    margin-right: 10px;
    border: 1px solid #fafafa;
    border-radius: 10px;
    padding: 5px 8px;
  }
}

Barre de navigation ‘position sticky’

La barre de navigation se déplace lors du scroll, puis se fixe à un endroit determiné.

HTML : Dans une balise <header></header>, quelque part à l’intérieur du <body>

<header>
      <div class="en-tete">
        <nav class="headernav">
          <a href="./index.html" class="logo">
            <img src="./Images/logo/logo-black.png" alt="Logo Gothic" />
          </a>
          <ul>
            <input type="checkbox" id="checkbox_toggle" />
            <label for="checkbox_toggle" class="hamburger">&#9776;</label>
            <div class="menu">
              <li><a href="./index.html">Accueil</a></li>
              <li><a href="./formulaire.html">Contact</a></li>
            </div>
          </ul>
        </nav>
      </div>
    </header>

Dans le CSS: dans le header (pas dans une div enfant) on indique position sticky, puis la coordonnée où l’élément doit se fixer. Le sticky fonctionne d’enfant à parent direct -> si on veut que ça se fixe sur le <body> il faut que le sticky soit sur un enfant direct du <body>.

header {
  position: sticky;
  top: 0px;
  z-index: 999;
}

.en-tete {
  display: flex;
  width: 100%;
  /* background-color: rgba(255, 255, 255, 0.2); */
  background: linear-gradient(rgba(2, 33, 46, 0.5), rgba(255, 255, 255, 0));
}
.headernav .logo {
  width: 150px;
  padding-left: 10px;
}

.headernav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.headernav ul .menu {
  list-style-type: none;
  display: flex;
}
.headernav ul .menu li {
  padding: 10px;
}
/* changement d'apparence si hover: */
.headernav ul .menu li:hover {
  background: linear-gradient(rgba(250, 250, 250, 0.3), rgba(0, 0, 0, 0.1));
  border-radius: 10px;
}
/* Enlever le soulignement et la couleur bleue du lien: */
.headernav ul li a {
  text-decoration: none;
  color: inherit;
}

.headernav input[type="checkbox"] {
  display: none;
}

.headernav .hamburger {
  display: none;
  font-size: 24px;
  user-select: none; /*empeche l'element d'etre selectionnable */
}

@media screen and (max-width: 520px) {
  .headernav ul .menu {
    display: none;
    transition: all 0.4s ease;
    position: absolute;
    right: 0;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    text-align: end;
    padding: 16px 0;
    background-color: rgba(51, 51, 51, 0.5);
  }
  .headernav ul .menu li:hover {
    background: none;
    border-radius: 0;
  }

  .headernav ul .menu li + li {
    margin-top: 12px;
  }

  .headernav input[type="checkbox"]:checked ~ .menu {
    /*si la checkbox est checkée*/
    display: block;
  }
  .headernav .hamburger {
    display: block;
    margin-right: 10px;
    border: 1px solid #fafafa;
    border-radius: 10px;
    padding: 5px 8px;
  }
}