How to Create Responsive Navigation with Proper Event Handling in the DOM-Projects Repository

To create responsive navigation in the DOM-Projects repository, implement a flex-based layout with CSS media queries for mobile adaptation and use classList.toggle() for event handling, following the pattern established in search-field-reveal/script.js.

The jisan-mia/dom-projects repository demonstrates a clean, lightweight approach to building navigation systems that adapt to different screen sizes without heavy dependencies. This guide walks through the actual implementation found in the source code, showing how to extend the existing static navigation into a fully responsive component with proper event handling.

Understanding the Core Navigation Architecture

The repository's navigation system relies on a simple but effective three-layer architecture that separates concerns between markup, presentation, and behavior.

HTML Structure in index.html

The navigation markup resides in index.html within a <nav> element that uses a flex container to align the brand logo and navigation links. The structure includes a brand section on the left and a .nav-list container holding the individual navigation items and GitHub link.

<nav>
  <section>
    <a href="#" class="left-side">
      <div class="brand"><img src="./favicon/apple-touch-icon.png" /></div>
      <strong>DOM Projects</strong>
    </a>
    <div class="nav-list">
      <div class="nav-item"><a href="#projects" class="btn project-nav-link">Projects</a></div>
      <div class="nav-item">
        <a class="btn github-link" target="_blank" href="https://github.com/Jisan-mia/dom-projects">
          Github
        </a>
      </div>
    </div>
  </section>
</nav>

Source: index.html lines 68-82 define this structure, using semantic HTML5 elements and CSS classes for styling hooks.

CSS Flex Layout and Media Queries

The styling in style.css implements a responsive layout using CSS Flexbox. The nav section acts as the primary flex container, horizontally distributing space between the brand and navigation list.

/* From style.css lines 27-38 */
nav section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.nav-list {
  display: flex;
  gap: 1rem;
  align-items: center;
}

For mobile adaptation, the repository already includes a media query that hides specific elements on small viewports. At max-width: 400px, the Projects link disappears to prevent overflow.

/* From style.css lines 66-71 */
@media (max-width: 400px) {
  .project-nav-link {
    display: none;
  }
}

Implementing Mobile Menu Toggle with Event Handling

To transform the static navigation into an interactive responsive navigation component, you need three additions: a toggle button, CSS visibility rules, and JavaScript event handling.

Adding the Burger Button

Insert a <button> element inside the existing nav section to serve as the mobile menu trigger. This button should only appear on small screens and target the .nav-list container.

<nav>
  <section>
    <a href="#" class="left-side">
      <div class="brand"><img src="./favicon/apple-touch-icon.png" /></div>
      <strong>DOM Projects</strong>
    </a>

    <!-- Mobile toggle button -->
    <button id="navToggle" class="nav-toggle" aria-label="Toggle menu">
      <i class="fas fa-bars"></i>
    </button>

    <div class="nav-list" id="navList">
      <div class="nav-item"><a href="#projects" class="btn project-nav-link">Projects</a></div>
      <div class="nav-item">
        <a class="btn github-link" target="_blank" href="https://github.com/Jisan-mia/dom-projects">
          Github
        </a>
      </div>
    </div>
  </section>
</nav>

CSS for Mobile Responsiveness

Extend the existing media query to handle the toggle button visibility and menu positioning. The .active class controls the menu visibility state.

/* Hide toggle on desktop */
.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Mobile-specific rules */
@media (max-width: 400px) {
  .nav-toggle {
    display: block;
  }

  .nav-list {
    display: none; /* Hidden by default */
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid #ccc;
    padding: 1rem;
  }

  .nav-list.active {
    display: flex; /* Shown when toggled */
  }
}

JavaScript Event Handling Pattern

The repository demonstrates a consistent event handling approach in search-field-reveal/script.js (lines 5-8), using classList.toggle() to manage UI state. Apply this same pattern to the navigation toggle.

// projects/nav-toggle/script.js
document.addEventListener('DOMContentLoaded', () => {
  const toggleBtn = document.getElementById('navToggle');
  const navList = document.getElementById('navList');

  // Same pattern as search-field-reveal/script.js lines 5-8
  toggleBtn.addEventListener('click', () => {
    navList.classList.toggle('active');
  });
});

This approach keeps the DOM manipulation declarative by leveraging CSS classes rather than inline styles, making the code easier to maintain and debug.

Complete Implementation Example

For testing or integration into the existing project structure, combine all components into a single demonstration file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive Nav Demo</title>
  <link rel="stylesheet" href="../style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <style>
    /* Mobile enhancements */
    .nav-toggle {
      display: none;
      background: transparent;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
    }
    
    @media (max-width: 400px) {
      .nav-toggle { display: block; }
      .nav-list {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid #ccc;
      }
      .nav-list.active { display: flex; }
    }
  </style>
</head>
<body>
  <nav>
    <section>
      <a href="#" class="left-side">
        <div class="brand"><img src="../favicon/apple-touch-icon.png" /></div>
        <strong>DOM Projects</strong>
      </a>
      <button id="navToggle" class="nav-toggle" aria-label="Toggle menu">
        <i class="fas fa-bars"></i>
      </button>
      <div class="nav-list" id="navList">
        <div class="nav-item"><a href="#projects" class="btn project-nav-link">Projects</a></div>
        <div class="nav-item">
          <a class="btn github-link" target="_blank" href="https://github.com/Jisan-mia/dom-projects">Github</a>
        </div>
      </div>
    </section>
  </nav>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const toggleBtn = document.getElementById('navToggle');
      const navList = document.getElementById('navList');
      toggleBtn.addEventListener('click', () => navList.classList.toggle('active'));
    });
  </script>
</body>
</html>

Summary

• The DOM-Projects repository uses a flex-based navigation system defined in index.html and styled in style.css with mobile-specific media queries at max-width: 400px.
• Responsive navigation requires extending the existing CSS to include a toggle button and absolute positioning for the mobile menu dropdown.
• Event handling follows the repository's established pattern in search-field-reveal/script.js, using classList.toggle('active') to show and hide the navigation menu.
• Progressive enhancement ensures the navigation remains functional without JavaScript, while the toggle provides an optimized mobile experience when scripting is available.

Frequently Asked Questions

How does the DOM-Projects repository handle navigation responsiveness?

The repository implements a basic responsive layout using CSS Flexbox in style.css (lines 27-38) with a media query that hides the Projects link on screens narrower than 400px (lines 66-71). The navigation remains horizontally aligned on desktop but simplifies for mobile viewports through CSS-only adaptations.

What is the recommended event handling pattern for mobile menu toggles?

According to the source code in search-field-reveal/script.js (lines 5-8), the repository favors using element.classList.toggle('className') inside a click event listener. This declarative approach separates state management from styling logic and maintains consistency across different interactive components.

Where should I place the JavaScript for the navigation toggle?

Create a new file at projects/nav-toggle/script.js or add the script inline at the bottom of index.html before the closing </body> tag. The script should wait for the DOMContentLoaded event before attaching listeners to ensure the DOM elements exist.

Does this approach work without JavaScript enabled?

Yes, the navigation remains functional as a static header because the core layout relies on CSS Flexbox rather than JavaScript positioning. Without JavaScript, the mobile toggle button simply won't appear (or can be hidden via CSS), and the desktop layout persists, ensuring graceful degradation.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}