Barre de navigation moderne HTML CSS

2,118 Claude777

Ouvrir dans l'éditeur Publiez votre code

Recommandé

28 June 2025

Confrontation des métamorphes

29 September 2025

Animation de chargement CSS avec image d'arrière-plan

10 August 2024

Filtre de galerie

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modern Navbar</title>
  <style>
    :root {
      --primary-color: #4a6cf7;
      --secondary-color: #6c757d;
      --dark-color: #212529;
      --white-color: #ffffff;
      --transition: all 0.3s ease-in-out;
    }

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }

body {
      background-color: #f8f9fa;
      color: var(--dark-color);
      line-height: 1.6;
    }

a {
      text-decoration: none;
      color: inherit;
    }

ul {
      list-style: none;
    }

.container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

/* Navbar Styles */
    .navbar {
      background-color: var(--white-color);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      height: 70px;
    }

.navbar-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
    }

.navbar-logo {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--primary-color);
      display: flex;
      align-items: center;
      gap: 8px;
    }

.navbar-logo svg {
      width: 28px;
      height: 28px;
    }

.navbar-menu {
      display: flex;
      align-items: center;
      gap: 30px;
    }

.nav-item {
      position: relative;
    }

.nav-link {
      color: var(--dark-color);
      font-weight: 500;
      padding: 8px 0;
      position: relative;
      transition: var(--transition);
    }

.nav-link:hover, .nav-link.active {
      color: var(--primary-color);
    }

.nav-link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background-color: var(--primary-color);
      transition: var(--transition);
    }

.nav-link:hover::after, .nav-link.active::after {
      width: 100%;
    }

/* Dropdown Styles */
    .dropdown {
      position: relative;
    }

.dropdown-toggle {
      display: flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
    }

.dropdown-toggle svg {
      transition: var(--transition);
    }

.dropdown.active .dropdown-toggle svg {
      transform: rotate(180deg);
    }

.dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      background-color: var(--white-color);
      min-width: 200px;
      border-radius: 8px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      padding: 10px 0;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: var(--transition);
      z-index: 100;
    }

.dropdown.active .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

.dropdown-item {
      padding: 8px 20px;
      display: block;
      font-weight: 500;
      transition: var(--transition);
    }

.dropdown-item:hover {
      background-color: rgba(74, 108, 247, 0.1);
      color: var(--primary-color);
    }

/* Action Buttons */
    .navbar-actions {
      display: flex;
      align-items: center;
      gap: 15px;
    }

.action-btn {
      padding: 8px 20px;
      border-radius: 5px;
      font-weight: 500;
      transition: var(--transition);
      cursor: pointer;
    }

.btn-outline {
      border: 1.5px solid var(--primary-color);
      color: var(--primary-color);
      background-color: transparent;
    }

.btn-outline:hover {
      background-color: var(--primary-color);
      color: var(--white-color);
    }

.btn-filled {
      background-color: var(--primary-color);
      color: var(--white-color);
      border: 1.5px solid var(--primary-color);
    }

.btn-filled:hover {
      background-color: transparent;
      color: var(--primary-color);
    }

/* Mobile Menu Toggle */
    .menu-toggle {
      display: none;
      cursor: pointer;
      width: 24px;
      height: 24px;
      position: relative;
      z-index: 101;
    }

.menu-toggle span {
      display: block;
      width: 100%;
      height: 2px;
      background-color: var(--dark-color);
      border-radius: 4px;
      position: absolute;
      transition: var(--transition);
    }

.menu-toggle span:nth-child(1) {
      top: 5px;
    }

.menu-toggle span:nth-child(2) {
      top: 50%;
      transform: translateY(-50%);
    }

.menu-toggle span:nth-child(3) {
      bottom: 5px;
    }

.menu-toggle.active span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

.menu-toggle.active span:nth-child(2) {
      opacity: 0;
    }

.menu-toggle.active span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

/* Main Content (for demo purposes) */
    .main-content {
      margin-top: 100px;
      padding: 20px;
      text-align: center;
    }

.main-content h1 {
      font-size: 2.5rem;
      margin-bottom: 20px;
      color: var(--primary-color);
    }

.main-content p {
      font-size: 1.1rem;
      max-width: 700px;
      margin: 0 auto;
    }

/* Responsive Styles */
    @media (max-width: 991px) {
      .menu-toggle {
        display: block;
      }

.navbar-menu {
        position: fixed;
        top: 0;
        right: -100%;
        background-color: var(--white-color);
        height: 100vh;
        width: 280px;
        flex-direction: column;
        align-items: flex-start;
        padding: 100px 30px 30px;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        transition: var(--transition);
        gap: 15px;
        overflow-y: auto;
      }

.navbar-menu.active {
        right: 0;
      }

.nav-item {
        width: 100%;
      }

.nav-link {
        display: block;
        padding: 10px 0;
      }

.dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding-left: 15px;
        display: none;
        min-width: 100%;
        background-color: #f8f9fa;
        border-radius: 4px;
      }

.dropdown.active .dropdown-menu {
        display: block;
      }

.navbar-actions {
        flex-direction: column;
        width: 100%;
        margin-top: 15px;
        gap: 10px;
      }

.action-btn {
        width: 100%;
        text-align: center;
      }
    }
  </style>
</head>
<body>
  
  <nav class="navbar">
    <div class="container navbar-container">
      <a href="#" class="navbar-logo">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 5l0 14M5 12l14 0"></path>
        </svg>
        ModernNav
      </a>

<ul class="navbar-menu">
        <li class="nav-item">
          <a href="#" class="nav-link active">Home</a>
        </li>
        <li class="nav-item dropdown">
          <div class="dropdown-toggle nav-link">
            Features
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="m6 9 6 6 6-6"/>
            </svg>
          </div>
          <ul class="dropdown-menu">
            <li><a href="#" class="dropdown-item">Feature One</a></li>
            <li><a href="#" class="dropdown-item">Feature Two</a></li>
            <li><a href="#" class="dropdown-item">Feature Three</a></li>
            <li><a href="#" class="dropdown-item">Feature Four</a></li>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <div class="dropdown-toggle nav-link">
            Products
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="m6 9 6 6 6-6"/>
            </svg>
          </div>
          <ul class="dropdown-menu">
            <li><a href="#" class="dropdown-item">Product One</a></li>
            <li><a href="#" class="dropdown-item">Product Two</a></li>
            <li><a href="#" class="dropdown-item">Product Three</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">About</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Contact</a>
        </li>
        
        <div class="navbar-actions">
          <a href="#" class="action-btn btn-outline">Login</a>
          <a href="#" class="action-btn btn-filled">Sign Up</a>
        </div>
      </ul>
    </div>
  </nav>

<div class="main-content container">
    <h1>Modern Responsive Navbar</h1>
    <p>This is a fully responsive modern navbar with dropdown menus, mobile hamburger toggle, and smooth animations. Resize the browser to see how it adapts to different screen sizes.</p>
  </div>

// Toggle Mobile Menu
    menuToggle.addEventListener('click', () => {
      menuToggle.classList.toggle('active');
      navbarMenu.classList.toggle('active');
    });

// Handle Dropdowns
    dropdowns.forEach(dropdown => {
      const toggle = dropdown.querySelector('.dropdown-toggle');
      
      toggle.addEventListener('click', (e) => {
        e.preventDefault();
        
        // Close other dropdowns when opening a new one
        dropdowns.forEach(otherDropdown => {
          if (otherDropdown !== dropdown && otherDropdown.classList.contains('active')) {
            otherDropdown.classList.remove('active');
          }
        });
        
        dropdown.classList.toggle('active');
      });
    });

// Close dropdowns when clicking outside
    document.addEventListener('click', (e) => {
      if (!e.target.closest('.dropdown')) {
        dropdowns.forEach(dropdown => {
          dropdown.classList.remove('active');
        });
      }
    });

// Active Link State (for demo purposes)
    navLinks.forEach(link => {
      if (!link.parentElement.classList.contains('dropdown')) {
        link.addEventListener('click', () => {
          navLinks.forEach(otherLink => {
            otherLink.classList.remove('active');
          });
          link.classList.add('active');
        });
      }
    });

// Close mobile menu when a link is clicked
    document.querySelectorAll('.navbar-menu a').forEach(link => {
      link.addEventListener('click', () => {
        if (window.innerWidth <= 991) {
          menuToggle.classList.remove('active');
          navbarMenu.classList.remove('active');
        }
      });
    });

// Handle resize events to reset mobile menu state when switching to desktop
    window.addEventListener('resize', () => {
      if (window.innerWidth > 991) {
        if (menuToggle.classList.contains('active')) {
          menuToggle.classList.remove('active');
          navbarMenu.classList.remove('active');
        }
      }
    });
  </script>
</body>
</html>

CSS