Beautiful, responsive, accessible menu system with support for sub-menus, search bar, profile and notification icons. Written in HTML 5, CSS 3, and vanilla JavaScript. For use with a dynamic menu generation from data structures

fastnav.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
}

/* Banner Styles */
.banner-container {
    background-color: #1a2535;
    padding: 20px;
    text-align: center;
}

.banner-image {
    max-width: 100%;
    height: auto;
    max-height: 100px;
}

/* Navbar Container */
.nav-container {
    background-color: #1a2535;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* App Name */
.app-name-container {
    background-color: #273449;
    padding: 8px 16px;
    border-radius: 6px;
    margin-right: 24px;
    display: none;
}

.app-name {
    color: #d6b94a;
    font-weight: 300;
    font-size: 0.875rem;
    user-select: none;
    text-shadow: 0 0 4px rgba(214, 185, 74, 0.6);
}

/* Main Menu */
.nav-menu {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0 10px;
}

.nav-item {
    position: relative;
}

.nav-item a {
    color: #e5e7eb;
    text-decoration: none;
    padding: 15px 20px;
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}

.nav-item a:hover {
    background-color: #2d3748; /* Darker hover background for increased contrast */
    border-radius: 4px;
}

/* Dropdown Menu */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #374151;
    min-width: 200px;
    top: 100%;
    left: 0;
    list-style: none;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    border-radius: 4px;
    z-index: 1;
}

.dropdown-content li {
    border-bottom: 1px solid #4b5563;
}

.dropdown-content li a {
    padding: 10px 20px;
    color: #e5e7eb;
    display: block;
}

.dropdown-content li a:hover {
    background-color: #2d3748; /* Darker hover background for increased contrast */
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Right Side (Search, Icons) */
.nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-field {
    padding: 10px 10px 10px 40px;
    border: none;
    border-radius: 4px;
    background-color: #273449;
    color: #e5e7eb;
    font-size: 18px;
    width: 293px;
}

.search-field::placeholder {
    color: #9ca3af;
    background-color: #273449;
}

.search-field:focus {
    outline: none;
    box-shadow: 0 0 0 2px #3b82f6;
    background-color: #273449;
}

.search-icon {
    position: absolute;
    left: 12px;
    color: #9ca3af;
    font-size: 16px;
    visibility: visible;
    opacity: 1;
}

.icon {
    color: #e5e7eb;
    font-size: 24px;
    padding: 8px;
    cursor: pointer;
    filter: grayscale(100%) brightness(100%);
    display: inline-block;
    visibility: visible;
    opacity: 1;
}

.icon.notification {
    background-color: #374151;
    border-radius: 4px;
}

.icon.profile {
    color: #d6b94a;
    font-size: 28px;
    filter: none;
}

.icon:hover {
    background-color: #4b5563;
    border-radius: 4px;
}

/* Hamburger Menu */
.hamburger {
    display: none;
    font-size: 24px;
    color: #e5e7eb;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    visibility: visible;
    opacity: 1;
}

/* Media Queries */
@media (min-width: 768px) {
    .app-name-container {
        display: block;
    }
}

@media (max-width: 768px) {
    .hamburger {
        display: block;
    }

    .nav-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 64px;
        left: 0;
        width: 100%;
        background-color: #1a2535;
        margin: 0;
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-item {
        width: 100%;
        margin: 0;
    }

    .dropdown-content {
        position: static;
        width: 100%;
        box-shadow: none;
        background-color: #374151;
    }

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

    .app-name-container {
        padding: 4px 8px;
    }

    .app-name {
        font-size: 0.875rem;
        text-shadow: 0 0 4px rgba(214, 185, 74, 0.6);
    }

    .nav-right {
        gap: 5px;
    }

    .search-field {
        width: 187px;
        font-size: 14px;
        padding: 8px 8px 8px 32px;
    }

    .search-field:focus {
        box-shadow: 0 0 0 2px #3b82f6;
    }

    .search-icon {
        font-size: 14px;
        left: 10px;
    }

    .icon {
        font-size: 20px;
        padding: 6px;
    }

    .icon.profile {
        font-size: 24px;
    }

    .icon.notification {
        background-color: #374151;
        border-radius: 4px;
    }
}

@media (max-width: 480px) {
    .search-container {
        display: none;
    }

    .banner-image {
        max-height: 80px;
    }
}

fastnav.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Menu with Subitems</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="banner-container">
        <img src="https://www.flcourts.gov/content/download/650/file/Florida-Courts-Logo.png" alt="Florida Courts Banner" class="banner-image">
    </header>
    <nav class="nav-container">
        <div class="app-name-container">
            <span class="app-name">MyApp</span>
        </div>
        <ul class="nav-menu">
            <li class="nav-item"><a href="#">Home</a></li>
            <li class="nav-item dropdown">
                <a href="#" class="dropdown-toggle">Products</a>
                <ul class="dropdown-content">
                    <li><a href="#">Product 1</a></li>
                    <li><a href="#">Product 2</a></li>
                    <li><a href="#">Product 3</a></li>
                </ul>
            </li>
            <li class="nav-item dropdown">
                <a href="#" class="dropdown-toggle">Services</a>
                <ul class="dropdown-content">
                    <li><a href="#">Service 1</a></li>
                    <li><a href="#">Service 2</a></li>
                </ul>
            </li>
            <li class="nav-item"><a href="#">Contact</a></li>
        </ul>
        <div class="nav-right">
            <button class="hamburger">☰</button>
            <div class="search-container">
                <span class="search-icon"><i class="fas fa-search"></i></span>
                <input type="text" class="search-field" placeholder="Search">
            </div>
            <span class="icon notification"><i class="fas fa-bell-o"></i></span>
            <span class="icon profile"><i class="fas fa-circle-user"></i></span>
            <span class="icon notification-fallback" style="display: none;">🔔</span>
        </div>
    </nav>
    <script src="script.js"></script>
</body>
</html>

fastnav.js

document.addEventListener('DOMContentLoaded', () => {
    const hamburger = document.querySelector('.hamburger');
    const navMenu = document.querySelector('.nav-menu');

    // Toggle mobile menu
    hamburger.addEventListener('click', () => {
        console.log('Hamburger clicked'); // Debug log
        navMenu.classList.toggle('active');
        hamburger.textContent = navMenu.classList.contains('active') ? '✕' : '☰';
    });

    // Toggle dropdown for mobile
    const dropdownToggles = document.querySelectorAll('.dropdown-toggle');
    dropdownToggles.forEach(toggle => {
        toggle.addEventListener('click', (e) => {
            if (window.innerWidth <= 768) {
                e.preventDefault();
                const parent = toggle.parentElement;
                console.log('Dropdown toggled:', parent); // Debug log
                parent.classList.toggle('active');
            }
        });
    });

    // Close menu when clicking outside
    document.addEventListener('click', (e) => {
        if (window.innerWidth <= 768 && !navMenu.contains(e.target) && !hamburger.contains(e.target)) {
            console.log('Clicked outside, closing menu'); // Debug log
            navMenu.classList.remove('active');
            hamburger.textContent = '☰';
            document.querySelectorAll('.dropdown.active').forEach(dropdown => {
                dropdown.classList.remove('active');
            });
        }
    });

    // Reset menu on window resize
    window.addEventListener('resize', () => {
        if (window.innerWidth > 768) {
            console.log('Resized to desktop, resetting menu'); // Debug log
            navMenu.classList.remove('active');
            hamburger.textContent = '☰';
            document.querySelectorAll('.dropdown.active').forEach(dropdown => {
                dropdown.classList.remove('active');
            });
        }
    });

    // Check if Font Awesome bell icon is loaded
    if (!document.querySelector('.icon.notification i').offsetWidth) {
        console.log('Font Awesome bell icon not visible');
        document.querySelector('.icon.notification').style.display = 'none';
        document.querySelector('.icon.notification-fallback').style.display = 'inline-block';
    }
});