How do you create a responsive navigation menu using CSS media queries?

When developing a responsive navigation menu, CSS media queries are an essential tool that enables you to adapt the styling and layout of the navigation menu based on various screen sizes and device characteristics. Here are the steps and examples for implementing CSS media queries to create a responsive navigation menu:

1. Basic HTML Structure

First, establish a basic HTML structure, as illustrated below:

html
<nav>
    <div class="nav-menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">About Us</a></li>
        </ul>
    </div>
    <div class="menu-toggle">☰</div>
</nav>

2. Basic CSS Styles

Next, apply basic styles to the navigation menu:

css
.nav-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.nav-menu li {
    padding: 15px;
}
.menu-toggle {
    display: none;
}

3. Adding Responsive Features with CSS Media Queries

Next, implement media queries to adjust the navigation menu layout across different screen sizes:

css
@media (max-width: 768px) {
    .nav-menu ul {
        display: none;
        flex-direction: column;
        width: 100%;
    }
    .nav-menu li {
        text-align: center;
        width: 100%;
    }
    .menu-toggle {
        display: block;
        cursor: pointer;
    }
}

4. Using JavaScript to Toggle Menu Visibility

Finally, incorporate JavaScript to manage the visibility of the navigation menu on smaller screens:

javascript
document.querySelector('.menu-toggle').addEventListener('click', function() {
    var menu = document.querySelector('.nav-menu ul');
    if(menu.style.display === 'block') {
        menu.style.display = 'none';
    } else {
        menu.style.display = 'block';
    }
});

5. Results

This configuration hides the main navigation menu and displays a menu icon (typically referred to as the hamburger menu) for screen widths under 768px. Upon clicking the icon, the menu expands vertically in a stacked format.

By implementing this method, you can enhance user experience across various device screen sizes and ensure that the website's navigation remains user-friendly and functional.