Exemple d'une barre de Navigation réactive avec recherche

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <style>
      .main-nav {
      display: flex;
      padding: 1em;
      border-radius: 5px;
      background: #1c87c9;
      color: white;
      }
      .main-nav > ul {
      display: flex;
      flex: 2;
      padding: 0;
      margin: 0;
      list-style-type: none;
      }
      .main-nav li { margin-right: 1em; }
      .main-nav > form {
      display: flex;
      justify-content: flex-end;
      flex: 1;
      }
      .main-nav input { flex: 1; }
      .main-nav button {
      padding: 0 1em;
      margin-left: .3em;
      border: 0;
      border-radius: 1em;
      background: white;
      color: #666666;
      }
      @media screen and (max-width: 575px) {
      .main-nav { flex-direction: column; }
      .main-nav ul { margin-bottom: 1em; }
      }
    </style>
  <body>
    <nav class="main-nav">
      <ul>
        <li>Accueil</li>
        <li>A propos</li>
        <li>Services</li>
        <li>Contactez-nous</li>
      </ul>
      <form>
        <input type="search" placeholder="Search">
        <button>Go</button>
      </form>
    </nav>
  </body>
</html>