Classic Hamburger To Dropdown Navbar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Classic Hamburger-to-Dropdown Navbar</title>
    <style>
        /*
        ========================================
        CSS Custom Properties (Universal Theme)
        ========================================
        */
        :root {
            --color-background: #ffffff;
            --color-text-primary: #111827;
            --color-text-secondary: #6b7280;
            --color-primary-accent: #3b82f6;
            --color-border: #e5e7eb;

--font-family-sans-serif: ui-sans-serif, system-ui, -apple-system, sans-serif;
            --navbar-height: 70px;
            --container-width: 1280px;
            --transition-speed: 0.2s;
            --border-radius: 0.375rem;
        }

/*
        ========================================
        Base & Page Styles
        ========================================
        */
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; font-family: var(--font-family-sans-serif); line-height: 1.6; background-color: #f9fafb; }
        .content { height: 200vh; max-width: var(--container-width); margin: 0 auto; padding: calc(var(--navbar-height) + 2rem) 1.5rem; }
        ul { list-style: none; margin: 0; padding: 0; }
        a { text-decoration: none; transition: color var(--transition-speed) ease; }

/*
        ========================================
        Main Navbar Structure
        ========================================
        */
        .navbar {
            position: sticky; top: 0; z-index: 1000;
            height: var(--navbar-height); display: flex; align-items: center;
            background-color: var(--color-background); border-bottom: 1px solid var(--color-border);
        }
        
        .navbar__container {
            display: flex; align-items: center; justify-content: space-between;
            width: 100%; max-width: var(--container-width);
            margin: 0 auto; padding: 0 1.5rem;
        }

.navbar__brand {
            font-size: 1.5rem; font-weight: 600; color: var(--color-text-primary);
        }

/*
        ========================================
        Mobile Navigation (Mobile-First Styles)
        ========================================
        */
        
        /* The Hamburger Toggle Button */
        .navbar__toggle {
            display: block; /* Shown by default on mobile */
            border: none; background: transparent; cursor: pointer; padding: 0.5rem;
        }
        .navbar__toggle .bar {
            display: block; width: 25px; height: 3px; margin: 5px auto;
            background-color: var(--color-text-primary); border-radius: 1px;
            transition: all var(--transition-speed) ease-in-out;
        }
        .navbar__toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
        .navbar__toggle.is-active .bar:nth-child(2) { opacity: 0; }
        .navbar__toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
        
        /* The Dropdown Menu */
        .navbar__menu {
            display: none; /* Hidden by default */
            position: fixed;
            top: var(--navbar-height); left: 0;
            width: 100%;
            background-color: var(--color-background);
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            z-index: 999;
        }
        .navbar__menu.is-active { display: block; }
        .navbar__item:not(:last-child) { border-bottom: 1px solid var(--color-border); }

.navbar__link {
            display: block; padding: 1rem 1.5rem; font-weight: 500;
            color: var(--color-text-secondary);
        }
        .navbar__link:hover, .navbar__link:focus { color: var(--color-primary-accent); }
        
        :is(.navbar__toggle, .navbar__link):focus-visible { outline: 2px solid var(--color-primary-accent); outline-offset: 2px; }
        
        /*
        ========================================
        Desktop Navigation Styles
        ========================================
        */
        @media (min-width: 768px) {
            .navbar__toggle {
                display: none; /* Hide hamburger on desktop */
            }

.navbar__menu {
                /* Reset mobile styles and show it horizontally */
                display: flex;
                position: static;
                width: auto;
                background: none;
                box-shadow: none;
            }

.navbar__list {
                display: flex;
                align-items: center;
                gap: 2rem;
            }

.navbar__item:not(:last-child) {
                border-bottom: none; /* Remove mobile border */
            }

.navbar__link {
                padding: 0.5rem; /* Adjust padding for horizontal layout */
            }
        }

</style>
</head>
<body>
    <header class="navbar">
        <div class="navbar__container">
            <a href="#" class="navbar__brand">WebStandard</a>
            
            <button class="navbar__toggle" id="navbarToggle" aria-label="Toggle navigation menu" aria-controls="navbarMenu" aria-expanded="false">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </button>
            
            <nav class="navbar__menu" id="navbarMenu">
                <ul class="navbar__list">
                    <li class="navbar__item"><a href="#" class="navbar__link">Home</a></li>
                    <li class="navbar__item"><a href="#" class="navbar__link">About</a></li>
                    <li class="navbar__item"><a href="#" class="navbar__link">Services</a></li>
                    <li class="navbar__item"><a href="#" class="navbar__link">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<main class="content">
        <h1>Classic Hamburger-to-Dropdown</h1>
        <p>This is the standard responsive navigation pattern. Resize your browser window to see it switch between the horizontal desktop menu and the mobile hamburger menu.</p>
    </main>
    
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        const navbarToggle = document.getElementById('navbarToggle');
        const navbarMenu = document.getElementById('navbarMenu');

if (navbarToggle && navbarMenu) {
            navbarToggle.addEventListener('click', function () {
                navbarMenu.classList.toggle('is-active');
                
                const isExpanded = navbarMenu.classList.contains('is-active');
                navbarToggle.setAttribute('aria-expanded', isExpanded);
            });
        }
    });
    </script>
</body>
</html>