Modèle de barre de navigation HTML et CSS réactif

1,760 lebdev

Ouvrir dans l'éditeur Publiez votre code

Modèle de barre de navigation HTML et CSS réactif

Recommandé

24 November 2025

Chargeur de jeu Unity WebGL avec prise en charge des publicités

29 August 2024

Interface utilisateur de la calculatrice - Neumorphisme - blanc

17 November 2025

Un code de Météore

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive Navbar</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      font-family: Arial, sans-serif;
    }

nav {
      background-color: #333;
      color: white;
      padding: 0.75rem 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

.logo {
      font-size: 1.5rem;
      font-weight: bold;
    }

.nav-links {
      display: flex;
      gap: 1.5rem;
    }

.nav-links a {
      color: white;
      text-decoration: none;
      transition: color 0.3s;
    }

.nav-links a:hover {
      color: #f0a500;
    }

.hamburger {
      display: none;
      flex-direction: column;
      cursor: pointer;
    }

.hamburger div {
      width: 25px;
      height: 3px;
      background-color: white;
      margin: 4px 0;
    }

@media (max-width: 768px) {
      .nav-links {
        display: none;
        flex-direction: column;
        background-color: #333;
        position: absolute;
        top: 60px;
        right: 0;
        width: 100%;
        text-align: center;
      }

.nav-links.active {
        display: flex;
      }

.hamburger {
        display: flex;
      }
    }
  </style>
</head>
<body>

<nav>
  <div class="logo">MySite</div>
  <div class="hamburger" onclick="toggleMenu()">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="nav-links" id="navLinks">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </div>
</nav>

</body>
</html>

CSS