Probleme mit Menü

[none]

Hallo Ihr Wissenden,

leider sind meine JavaScript-Kenntnisse = 0.

Habe folgendes Problem:

Ich möchte, dass sich das Menu nach einem Klick auf einen Link automatisch schließt. Die Seite ist als OneSidePage angelegt.

Code:

<!-----------------------_MENU_NEW_---------------------------------------->

<nav class="site-nav">
    </summary>
  <ul>
        <li><a href="#UE">Über mich</a></li>
        <li><a href="#Leistungen">Leistungen</a></li>
        <li><a href="#Kurse">Kurse</a></li>
        <li><a href="#Kontakt">Kontakt</a></li>
        <li><a href="#Recht"><strong>§</strong> Rechtliche Hinweise</a></li>
  </ul>
    </summary>
</nav>


    <div id="full-screen-menu-toggle" style=" font-size: 1.5em;">&Congruent;</div>


<script>
  // Quelle: http://johnm.io/project/hamburgler/
 
  document.getElementById('full-screen-menu-toggle').addEventListener('click', checkNav);
  window.addEventListener("keyup", function(e) {
    if (e.keyCode == 27) closeNav();
  }, false);

  function checkNav() {
    if (document.body.classList.contains('full-screen-menu-active')) {
      closeNav();
    } else {
      openNav();
    }
  }

  function closeNav() {
    document.body.classList.remove('full-screen-menu-active');
  }

  function openNav() {
    document.body.classList.add('full-screen-menu-active');
  }
</script>

Könnt Ihr mir bitte helfen?
Vielen Dank für Eure Hilfe im Voraus...
none

[admin]

Kannst du mir mal in Codepen kopieren?
Mit CSS und was dazugehört.
Dann kann man das besser sehen.
Oder den kompletten Code hier posten.

Aber gehen tut das .
Man muss auf alle a Elemente ein Event registrieren und wenn es geklickt wurde gibt man das Menü die Klasse, die man erstellt, hat, wenn das Menü geschlossen ist.
Deswegen wäre der kompletten Code gut , damit ich den gleich so erstellen kann das er bei dir auch funktioniert.

[Gast]

Hallo Admin,

vielen Dank für Deine Antwort! In Codepen kopieren, keine Ahnung wie das geht, sorry!

Hier kommt noch der CSS-Code:

#full-screen-menu-toggle {
z-index: 200;
position: fixed;
padding: 0.25em 0.5em;
top:1em;
right:1em;
background: rgba(0,6,22, 0.75);
color: #FFFFFF;
font-weight: 400;
}

.full-screen-menu-active #full-screen-menu-toggle {
background:red;
}


.site-nav {
transition: all 0.4s ease;
opacity: 0;
pointer-events: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 6, 22, 0.85);
z-index:100;
width: 320px;
height: 333px;
}


.full-screen-menu-active .site-nav {
opacity: 1;
pointer-events: initial;
}

.site-nav ul {
display: block;
transition: all 0.3s ease;
padding: 0;
list-style-type: none!important;
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%) scale(1.3);
margin: 0px!important;
padding: 0px!important;
color: #FFFFFF;
font-weight: 400!important;
}


.site-nav ul li {
list-style-type: none;
margin-bottom: 0.5em;
line-height: 1.25em;
letter-spacing: 0.1em;
}

.site-nav ul li:hover {
background-color: rgba(255,255,255, .125);
}

.site-nav a {
color:white;
text-decoration: none;
display: block;
padding:.5em;
}

.full-screen-menu-active .site-nav ul {
transform: translate(-50%, -50%) scale(0.9)
}

/*############*/

Viel mehr Code gibt es nicht, weil ich das Menü erstmal auf eine leeren HTML-Seite teste...

VG
none

[Gast]

...mit folgendem Code konnte ich das Problem selbst lösen:

document.querySelectorAll("nav li a").forEach(function (ele) { ele.addEventListener("click", closeNav) });