Barre de navigation moderne HTML CSS

1933 Claude777

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

29 October 2025

Exemple d'animation de bouton HTML CSS

29 January 2026

Présentation de supercars : Diaporama accordéon HTML CSS

1 November 2024

Site Web de portfolio HTML avec menu latéral

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>

Recommandé

Exemple d'animation de bouton HTML CSS

Présentation de supercars : Diaporama accordéon HTML CSS

Site Web de portfolio HTML avec menu latéral

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS