Bei Click wird das Navigations-Menü gezeigt

Achtung:

Schaut Euch den Source-Code an, um den ganzen Code zu sehen!

HTML-Code

<body>
  […]
  <!-- Verknüpfung zur Javascript-Datei "script.js" -->
  <script src="js/script.js"></script>
</body>

Javascript-Code

// die eigentliche Funktion, die das Menü sichtbar/unsichtbar macht
function menuAnAus() {
  navMenu.classList.toggle("sichtbar");
}

// der Button mit dem Burger-Menü
const navButton = document.querySelector("nav button");

// das Menü, dass sichtbar/unsichtbar werden soll
// sobald auf den Burger-Button geklickt werden soll
const navMenu = document.querySelector("nav ul");

navButton.addEventListener("click", menuAnAus);

CSS-Code

nav {
  /* Elternelement */
  position: relative; 

  /* wie groß ist die Fläche, die bei Hover reagiert? */
  width: 32px;
}

nav ul {
  list-style-type: none;
  width: 9em;

  /* Position des Menüs in Beziehung auf Burger-Icons */
  position: absolute;
  left: 20px;
  top: 20px;

  /* Menü anfangs unsichtbar */
  display:none;
}

.sichtbar {
  /* Clickt man auf das Burger-Icon, wird das Menü sichtbar/unsichtbar */
  display: block;
}