Barre de navigation moderne HTML CSS

1937 Claude777

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

17 November 2024

Code source HTML5 du jeu Iron Snout

18 June 2025

<!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>

Barre de navigation moderne HTML CSS

Recommandé

Barre de menu horizontale

Code source HTML5 du jeu Iron Snout

Livre de sorcières

HTML

CSS

JS

Recommandé

Barre de menu horizontale

Code source HTML5 du jeu Iron Snout

Livre de sorcières

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS