HTML CSS Barra di navigazione moderna

1822 Claude777

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

25 November 2025

Caricatore di giochi HTML5 con Yandex Games SDK

17 January 2026

Portfolio di sviluppatori web: HTML, CSS, JavaScript, UI/UX

22 August 2025

Commento segnaposto codice HTML

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>

Consigliato

Caricatore di giochi HTML5 con Yandex Games SDK

Portfolio di sviluppatori web: HTML, CSS, JavaScript, UI/UX

Commento segnaposto codice HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS