Zyrex

Przykład jak za pomocą JavaScript wyświetlić menu po kliknięciu w przycisk toggle

Oto przykład JavaScript służącego do wyświetlania menu po kliknięciu w przycisk toggle z animacją:

// Select the menu toggle button and menu elements
const menuToggle = document.querySelector('.menu-toggle');
const menu = document.querySelector('.menu');

// Add a click event listener to the menu toggle button
menuToggle.addEventListener('click', () => {
  // Toggle the "menu-open" class on the menu element
  menu.classList.toggle('menu-open');

  // Animate the menu using CSS transitions
  if (menu.classList.contains('menu-open')) {
    menu.style.transform = 'translateY(0)';
  } else {
    menu.style.transform = 'translateY(-100%)';
  }
});

W powyższym przykładzie przycisk toggle menu i menu są pobierane za pomocą selektorów DOM i są przypisywane do zmiennych. Następnie dodawane jest zdarzenie click do przycisku toggle menu, które wywołuje funkcję callback. Funkcja callback dodaje lub usuwa klasę „menu-open” z menu i animuje menu za pomocą transformacji CSS. Musimy również pamiętać aby do klasy „menu-open” dopisać w CSS display: block.