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

1,654 lebdev

Ouvrir dans l'éditeur Publiez votre code

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

Recommandé

25 June 2025

Formulaire de connexion et d'inscription avec arrière-plan 3D

14 September 2024

Curseur de survol (sombre/clair)

31 January 2026

Chargeur de jeu HTML5 People Playground

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