Visa hamburgare menyn vid klick

Nu lägger vi till kod i JavaScript som kan hantera att visa menyn när man klickar på hamburger-knappen.

JavaScript för att hantera klick

När man klickar på hamburgar-knappen så vill vi visa eller dölja navigationsmenyn. För att hantera detta med JavaScript så kan vi lägga till eller ta bort en CSS-klass som togglar visningen av menyn.

Vi lägger till följande JavaScript i filen public/js/responsive-navbar.js.

// Get the hamburger menu button element by its ID
const menuToggle = document.getElementById('menu-toggle')

// Get the navigation links container by its ID
const navLinks = document.getElementById('nav-links')

// Add a click event listener to the menu button
menuToggle.addEventListener('click', () => {
  // Toggle the 'show' class on the nav links to show/hide the menu
  navLinks.classList.toggle('show')
})

Det som koden gör är att den hämtar elementet för hamburgar-knappen och navigationsmenyn med hjälp av deras ID. Sedan lägger den till en “click” event listener på knappen som togglar klassen “show” på navigationsmenyn när knappen klickas.

Om du vill debugga koden, eller förstå vad variablerna innehåller, så kan du använda console.log() för att skriva ut värden i webbläsarens konsol.

CSS för att visa menyn vid klick

För att detta skall fungera behövs även en CSS-klass som hanterar visningen av menyn när klassen “show” är aktiv. Vi lägger till följande CSS i filen public/css/responsive-navbar.css, i slutet av vår media query.

/* Responsive styles: when screen is smaller than 600px */
@media (max-width: 600px) {

  /* The other rules we recently added */

+  /* Show menu when 'show' class is added by JS */
+  .nav-links.show {
+    display: flex;
+  }
}

Nu närmar vi oss.

Så här ser det ut på en smal skärm.

Image description — Bild: Header med navbar på en smal skärm.

Om man klickar på hamburgar-knappen så visas menyn. Om man klickar igen så döljs menyn.