🚀 Example One: Navigation and Scroll - MuaddhAlsway/Alert-Fashion GitHub Wiki

🚀 Example One: Navigation and Scroll

📄 Code: Part 1 – Menu Toggle and Close

const navMenu = document.getElementById('nav-menu'),
      navToggle = document.getElementById('nav-toggle'),
      navClose = document.getElementById('nav-close');

/* Menu Show */
if(navToggle){
  navToggle.addEventListener('click', () => {
    navMenu.classList.add('show-menu');
  });
}

/* Menu Hide */
if(navClose){
  navClose.addEventListener('click', () => {
    navMenu.classList.remove('show-menu');
  });
}

💡 Explanation

What is happening?

- Selecting three elements from the HTML:

- navMenu: The menu you want to show/hide.

- navToggle: The button/icon that opens the menu.

- navClose: The button/icon that closes the menu.

How does it work?

- Click navToggle → adds class show-menu to navMenu → Menu shows.

- Click navClose → removes class show-menu → Menu hides.

Why use if(navToggle) and if(navClose)?

- These check if the element exists in the DOM to avoid runtime errors.