What is the best way to use JavaScript to create an addEventListener that toggles a hamburger menu back and forth

Question

What is the best way to use JavaScript to create an addEventListener that toggles a hamburger menu back and forth

Hi there! I'm currently in the final stages of polishing up my website before launching it online. However, I'm stuck on how to add an eventListener that will close the navbar hamburger menu without requiring manual scrolling back up to the top of the landing page. Here's what I've got so far.

//Function to select an element
const selectElement = function (element) {
    return document.querySelector(element);
};

let menuToggler = selectElement('.menu-toggle');
let body = selectElement('body');

menuToggler.addEventListener('click', function () {
    body.classList.toggle('open');
});

// Implementing a parallax scrolling effect
window.addEventListener('scroll', function () {
    const parallax = document.querySelector('.parallax');
    let scrollPosition = window.pageYOffset;
  
    parallax.style.transform = 'translateY(' + scrollPosition * -.10 + 'px)';
  });

For more context, here's a screenshot of the HTML document with the nav tag. I would greatly appreciate a detailed explanation of the JavaScript code as I am still relatively new to it. : ) Thank you! https://i.sstatic.net/4XI2l.png

I've also included a link to a video showcasing how the hamburger menu functions

javascript html css addeventlistener

Answer 1

Answer №1

If you want to close the navbar when clicking on a nav-link, you can achieve this with the following code:

const menuToggler = document.querySelector('.menu-toggle');
const body = document.body;
const navItems = document.querySelectorAll(".nav-item");

Array.from(navItems).map(el => {
  el.addEventListener('click', function () {
      body.classList.remove('open');
  });
});

menuToggler.addEventListener('click', function () {
    body.classList.toggle('open');
});

// Implementing a parallax scrolling effect
window.addEventListener('scroll', function () {
    const parallax = document.querySelector('.parallax');
    let scrollPosition = window.pageYOffset;

    parallax.style.transform = 'translateY(' + scrollPosition * -.10 + 'px)';
});

Answer 2

If you want to close the navbar when clicking on a nav-link, you can achieve this with the following code:

const menuToggler = document.querySelector('.menu-toggle');
const body = document.body;
const navItems = document.querySelectorAll(".nav-item");

Array.from(navItems).map(el => {
  el.addEventListener('click', function () {
      body.classList.remove('open');
  });
});

menuToggler.addEventListener('click', function () {
    body.classList.toggle('open');
});

// Implementing a parallax scrolling effect
window.addEventListener('scroll', function () {
    const parallax = document.querySelector('.parallax');
    let scrollPosition = window.pageYOffset;

    parallax.style.transform = 'translateY(' + scrollPosition * -.10 + 'px)';
});

Answer 3

Answer №2

To implement an event listener on the entire document, you need to check if the clicked element is either the menu button, the navigation element (nav), or a child of the navigation element. If it does not match any of these conditions, then remove the specified class.

document.addEventListener('click',(e)=>{
    // Identify the clicked element
    let target = e.target;

    // Select the navigation element
    let nav = document.querySelector('nav');

    // Check if it's not the menu button, nav, or a child of nav
    if(target != menuToggler && target != nav && target.closest('nav') != nav){
        body.classList.remove('open');
    }
});

You can also utilize a key event such as pressing the ESC key to trigger the removal of the class.

document.addEventListener('keydown',(e)=>{
    if(e.key=="Escape"){
        body.classList.remove('open');
    }
});

If you wish to close the menu after clicking a link within the navigation section, include the remove code in your existing link listeners or incorporate a new one for the links. Alternatively, you can apply a delegated listener on the nav element and remove it from there.

document.querySelector('nav').addEventListener('click',(e)=>{
   if(e.target.classList.contains('nav-link')){
       body.classList.remove('open');
   }
});

Answer 4

To implement an event listener on the entire document, you need to check if the clicked element is either the menu button, the navigation element (nav), or a child of the navigation element. If it does not match any of these conditions, then remove the specified class.

document.addEventListener('click',(e)=>{
    // Identify the clicked element
    let target = e.target;

    // Select the navigation element
    let nav = document.querySelector('nav');

    // Check if it's not the menu button, nav, or a child of nav
    if(target != menuToggler && target != nav && target.closest('nav') != nav){
        body.classList.remove('open');
    }
});

You can also utilize a key event such as pressing the ESC key to trigger the removal of the class.

document.addEventListener('keydown',(e)=>{
    if(e.key=="Escape"){
        body.classList.remove('open');
    }
});

If you wish to close the menu after clicking a link within the navigation section, include the remove code in your existing link listeners or incorporate a new one for the links. Alternatively, you can apply a delegated listener on the nav element and remove it from there.

document.querySelector('nav').addEventListener('click',(e)=>{
   if(e.target.classList.contains('nav-link')){
       body.classList.remove('open');
   }
});

What is the best way to use JavaScript to create an addEventListener that toggles a hamburger menu back and forth

Answer №1

Answer №2

Similar questions

The animation in ThreeJs encounters context issues within Angular 2

Utilizing JavaScript or PHP to assign a uniform class to dynamically generated elements

There was an error in reading the property 'RNFSFileTypeRegular' of null, with the JavaScript engine reporting as hermes

Is there a way to use a single function to fill and calculate multiple input fields with PHP, Javascript, and

Utilizing React Hook Form for Interactive Slider and User Input Controls

Modifying the theme of the Angular UI-Bootstrap datepicker

Nested tables in CSS

Most efficient method for structuring back-end Node processes and integrating them with front-end Vue/Nuxt applications

What steps can I take to address the div issue in my React application?

Jeditable Failing to Retrieve "id" Value

Guide to changing the size of an image window in CSS when the container's width falls below a specific threshold

Using Regex to detect recurrent (similar) patterns in jQuery <input> tags

Revolutionary newspaper design utilizing asp.net's C# web forms

Strange FontAwesome input placeholder issue

Javascript regular expression fails to find a match

After running the command "npx/npm create-react-app hello" to create a react app, I received the following message

Searching for a way to access the child window URL within the parent window on a React.JS platform?

Stop the Bootstrap accordion from collapsing when clicking on an internal anchor (href)

Enhance HTML Performance with Resource Preloading

Implementing fetch within a custom hook to display a loader within a return function